/* ==========================================================================
   OsmoTools : calcul des taxes au Canada ([osmova_taxes_canada])
   TPS et TVQ, TPS + TVP ou TVH, calcul inversé, pourboire, facture multi-lignes.
   ========================================================================== */

.otq {
    --otq-noir: #0A0A0A;
    --otq-gris: #6B6B6B;
    --otq-gris-bg: #F6F7F9;
    --otq-border: #E5E7EB;
    --otq-blue: #0064FF;
    --otq-blue-bg: color-mix(in srgb, var(--otq-blue) 6%, white);
    --otq-blue-line: color-mix(in srgb, var(--otq-blue) 18%, white);
    --otq-rouge: #B42318;
    --otq-orange: #B54708;
    --otq-vert: #067647;
    --otq-mono: 'JetBrains Mono', monospace;
    margin: 0 0 40px;
    padding: 28px;
    border: 1px solid var(--otq-border);
    border-radius: 16px;
    background: #fff;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--otq-noir);
    container: otq / inline-size;
}

.otq *,
.otq *::before,
.otq *::after {
    box-sizing: border-box;
}

.otq [hidden] {
    display: none !important;
}

.otq__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.otq__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 10px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--otq-blue) 10%, white);
    color: var(--otq-blue);
    font: 700 11px/1.4 var(--otq-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.otq .otq__title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    line-height: 1.25;
}

.otq__intro {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--otq-gris);
}

.otq :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--otq-blue) 45%, white);
    outline-offset: 2px;
}

/* ---------- Champs ---------- */

.otq__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0 0 14px;
}

.otq__field > label {
    font-size: 13px;
    font-weight: 600;
}

.otq select,
.otq input[type="text"] {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--otq-border);
    border-radius: 10px;
    background: #fff;
    color: var(--otq-noir);
    font: 700 17px/1.2 var(--otq-mono);
}

.otq select {
    padding-right: 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

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

.otq input.is-error {
    border-color: var(--otq-rouge);
    background: #FEF3F2;
}

.otq__money {
    position: relative;
}

.otq .otq__montant {
    height: 64px;
    padding-right: 44px;
    font-size: 26px;
    font-weight: 800;
}

.otq__devise {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--otq-gris);
    font: 800 22px/1 var(--otq-mono);
    pointer-events: none;
}

.otq__hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--otq-gris);
}

.otq__field .otq__hint {
    margin: 0;
}

/* ---------- Onglets ---------- */

.otq__tabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 18px;
    padding: 4px;
    border-radius: 12px;
    background: var(--otq-gris-bg);
}

.otq__tab {
    flex: 1 1 0;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--otq-gris);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.otq__tab:hover {
    color: var(--otq-noir);
}

.otq__tab[aria-selected="true"] {
    background: #fff;
    color: var(--otq-blue);
    box-shadow: 0 1px 3px rgba(10, 10, 10, .08), 0 0 0 1px var(--otq-border);
}

/* ---------- Sens du calcul ---------- */

.otq__sens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.otq__seg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--otq-border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.otq__seg input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--otq-blue);
}

.otq__seg:has(input:checked) {
    border-color: var(--otq-blue);
    background: var(--otq-blue-bg);
    color: var(--otq-blue);
}

.otq__seg:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--otq-blue) 45%, white);
    outline-offset: 2px;
}

/* ---------- Facture ---------- */

.otq__lignes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px;
}

.otq__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) 40px;
    gap: 8px;
    align-items: center;
}

.otq .otq__ligne input,
.otq .otq__ligne select {
    height: 44px;
    font-size: 15px;
}

.otq .otq__ligne .otq__l-desc {
    font-family: inherit;
    font-weight: 600;
}

.otq .otq__ligne select {
    font-size: 14px;
}

.otq__l-del {
    width: 40px;
    height: 44px;
    border: 1px solid var(--otq-border);
    border-radius: 10px;
    background: #fff;
    color: var(--otq-gris);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.otq__l-del:hover {
    border-color: var(--otq-rouge);
    color: var(--otq-rouge);
}

/* ---------- Boutons ---------- */

.otq__btn {
    padding: 10px 16px;
    border: 1px solid var(--otq-border);
    border-radius: 10px;
    background: #fff;
    color: var(--otq-noir);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.otq__btn:hover {
    border-color: var(--otq-noir);
}

.otq__btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.otq__btn--main {
    border-color: var(--otq-blue);
    color: var(--otq-blue);
}

.otq__btn--main:hover {
    background: var(--otq-blue);
    color: #fff;
}

/* ---------- Résultat ---------- */

.otq__res {
    margin: 4px 0 0;
    padding: 20px 22px;
    border: 1px solid var(--otq-blue-line);
    border-radius: 14px;
    background: var(--otq-blue-bg);
}

.otq__res:empty {
    display: none;
}

.otq__res.is-error {
    border-color: #FECDCA;
    background: #FEF3F2;
}

.otq__err {
    margin: 0;
    color: var(--otq-rouge);
    font-weight: 600;
}

.otq__res-lab {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--otq-gris);
}

.otq__big {
    display: block;
    color: var(--otq-blue);
    font: 800 clamp(28px, 5vw, 40px)/1.15 var(--otq-mono);
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.otq__recu {
    margin: 16px 0 0;
    padding: 6px 16px;
    border: 1px solid var(--otq-blue-line);
    border-radius: 12px;
    background: #fff;
}

.otq__recu + .otq__recu {
    margin-top: 8px;
}

.otq__r {
    display: flex;
    gap: 6px 12px;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--otq-border);
}

.otq__r:last-child {
    border-bottom: 0;
}

.otq__r dt,
.otq__r dd {
    margin: 0;
    min-width: 0;
}

.otq__r dt {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
}

.otq__r dd {
    flex: 0 0 auto;
    font: 700 15px/1.3 var(--otq-mono);
    text-align: right;
    white-space: nowrap;
}

.otq__r.is-sub dt {
    padding-left: 14px;
    color: var(--otq-gris);
    font-weight: 500;
}

.otq__r.is-sub dd {
    color: var(--otq-gris);
    font-weight: 600;
}

.otq__r.is-tt dt,
.otq__r.is-tt dd {
    color: var(--otq-noir);
}

.otq__r.is-total {
    border-top: 2px solid var(--otq-noir);
    border-bottom: 0;
}

.otq__r.is-total dt,
.otq__r.is-total dd,
.otq__r.is-grand dt,
.otq__r.is-grand dd {
    font-weight: 800;
}

.otq__r.is-total dd {
    font-size: 17px;
}

.otq__r.is-grand dd {
    color: var(--otq-blue);
    font-size: 18px;
}

.otq__note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.otq__note.is-warn {
    color: var(--otq-orange);
    font-weight: 600;
}

.otq__note.is-ok {
    color: var(--otq-vert);
    font-weight: 700;
}

.otq__note.otq__detail {
    font-family: var(--otq-mono);
    font-size: 12.5px;
    color: var(--otq-gris);
}

/* ---------- Options ---------- */

.otq__opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
}

.otq__opt {
    padding: 14px 16px;
    border: 1px solid var(--otq-border);
    border-radius: 14px;
}

.otq__opt summary {
    font-weight: 700;
    cursor: pointer;
}

.otq__opt[open] summary {
    margin-bottom: 12px;
}

.otq__radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.otq__radio,
.otq__check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.otq__check {
    padding: 4px 2px;
}

.otq__radio input,
.otq__check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--otq-blue);
}

.otq__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 12px;
}

.otq__pill {
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--otq-border);
    border-radius: 999px;
    background: #fff;
    color: var(--otq-noir);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.otq__pill:hover {
    border-color: var(--otq-blue);
    color: var(--otq-blue);
}

.otq__pill[aria-pressed="true"] {
    border-color: var(--otq-blue);
    background: var(--otq-blue);
    color: #fff;
}

.otq__pb-autre {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-weight: 700;
    color: var(--otq-gris);
}

.otq input.otq__pb-val {
    width: 86px;
    height: 38px;
    border-radius: 999px;
    font-size: 14px;
}

/* ---------- Bas de l'outil ---------- */

.otq__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 18px 0 0;
}

.otq__status {
    margin: 0;
    font-size: 13px;
    color: var(--otq-gris);
}

.otq__more {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--otq-gris);
}

/* ---------- Responsive ---------- */

/* Requêtes de conteneur : l'outil s'adapte à la largeur de sa colonne, pas à celle de l'écran. */
@media (max-width: 720px) {
    .otq {
        padding: 18px;
    }
}

@container otq (max-width: 640px) {
    .otq__res {
        padding: 16px;
    }

    .otq__recu {
        padding: 4px 12px;
    }

    .otq__ligne {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 40px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--otq-border);
    }

    .otq__ligne .otq__l-desc {
        grid-column: 1 / -1;
    }

    .otq .otq__ligne select {
        padding: 0 24px 0 10px;
    }
}

@container otq (max-width: 440px) {
    .otq__sens {
        grid-template-columns: 1fr;
    }

    .otq__tabs {
        flex-direction: column;
    }

    .otq__tab {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .otq__tab {
        transition: none;
    }
}