/* ==========================================================================
   tarif-dispo.css — aside récap + modes de paiement (tous produits)
   Tokens : root.css (--color-site-1/2/3, --font, --border-radius, --color-border, --text-color)
   ========================================================================== */

html {
    overflow-x: clip !important;
}

.row-blog-revers,
.row-blog-reverse {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.row-blog-revers:before,
.row-blog-revers:after,
.row-blog-reverse:before,
.row-blog-reverse:after {
    display: none;
}

/* ----- Aside sticky ----- */

#vjs-recap,
.td-aside,
.visa-resa__side {
    position: sticky;
    top: 90px;
    z-index: 20;
    float: none;
    align-self: flex-start;
}

#vjs-recap .payment-side-block,
.td-aside .payment-side-block,
.payment-side-block {
    padding: 22px 20px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--text-color) 8%, transparent);
    font-family: var(--font);
    background: #fff;
}

#vjs-recap .info-title-widget,
.td-aside .info-title-widget {
    margin: 0 0 18px;
    font-family: var(--font);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-site-2);
}

@media (max-width: 991px) {
    #vjs-recap,
    .td-aside,
    .visa-resa__side {
        position: static;
    }
}

/* ----- Récapitulatif du prix ----- */

.td-recap,
.recap-prix {
    margin-top: 8px;
    font-family: var(--font);
}

.visa-side-card.recap-prix,
.visa-side-card.td-recap {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.td-recap__conditions,
.recap-prix__conditions.cancelPolicies,
#vjs-recap .recap-prix__conditions.cancelPolicies {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-site-1);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.td-recap__conditions-label,
.recap-prix__conditions-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.td-recap__conditions-chevron,
.recap-prix__conditions-chevron {
    color: var(--text-color);
    opacity: 0.45;
    font-size: 12px;
}

.td-recap__card,
.recap-prix__card {
    padding: 16px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    /* background: color-mix(in srgb, var(--color-site-2) 6%, #fff); */
}

.td-recap__title,
.recap-prix__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color);
}

.td-recap__title .fa,
.recap-prix__title .fa,
.td-recap__icon,

.td-recap__conditions .fa,
.recap-prix__conditions .fa {
    color: var(--color-site-1);
}
.recap-prix__icon{
    color: var(--color-site-2);
}
.td-recap__icon,
.recap-prix__icon {
    flex: 0 0 22px;
    width: 22px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.td-recap__row,
.recap-prix__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 2px;
}

.td-recap__info,
.recap-prix__info {
    flex: 1;
    min-width: 0;
}

.td-recap__label,
.recap-prix__label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.td-recap__meta,
.recap-prix__meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.5;
}

.td-recap__amount,
.recap-prix__amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

.td-recap__detail-btn,
.recap-prix__detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-color);
    opacity: 0.5;
    font-size: 12px;
    cursor: pointer;
}

.td-recap__detail-btn.is-open .fa,
.recap-prix__detail-btn.is-open .fa {
    transform: rotate(180deg);
}

.td-recap__subtotal,
.recap-prix__subtotal {
    align-items: center;
    margin-top: 6px;
    padding: 12px;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--color-site-2) 10%, #fff);
}

.td-recap__pay,
.recap-prix__pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--color-site-1) 12%, #fff);
    color: var(--color-site-1);
}

.td-recap__subtotal .td-recap__icon,
.recap-prix__subtotal .recap-prix__icon,
.td-recap__pay .fa,
.recap-prix__pay .fa,
.recap-prix__net .recap-prix__icon {
    display: none;
}

.td-recap__pay-label,
.recap-prix__pay-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-site-1);
    text-transform: uppercase;
}

.td-recap__pay-amount,
.recap-prix__pay-amount,
.recap-prix__pay .recap-total {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-site-1);
    white-space: nowrap;
}

.td-recap__row--coupon .td-recap__amount,
.recap-prix__row--coupon .recap-prix__amount {
    color: var(--color-site-1);
}

.td-recap__room,
.recap-prix__room {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 2px 0;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

.td-recap__status,
.recap-prix__status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.recap-prix__status--ok,
.td-recap__status--ok {
    color: #fff;
    background: var(--bs-success, #22bb33);
}

.recap-prix__status--wait,
.td-recap__status--wait {
    color: #fff;
    background: var(--color-site-1);
}

.td-recap__coupon,
.recap-prix__coupon {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.td-recap__coupon-field,
.recap-prix__coupon-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.td-recap__coupon-field .fa,
.recap-prix__coupon-field .fa {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 1;
    color: var(--color-site-2);
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.td-recap__coupon .form-control,
.recap-prix__coupon .form-control {
    height: 44px;
    padding-left: 36px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    box-shadow: none;
    font-family: var(--font);
}

.td-recap__coupon-btn,
.recap-prix__coupon-btn {
    min-width: 64px;
    height: 44px;
    border: 0;
    border-radius: var(--border-radius);
    background: var(--color-site-1);
    color: #fff;
    font-family: var(--font);
    font-weight: 800;
}

.td-recap__coupon-btn:hover,
.td-recap__coupon-btn:focus,
.recap-prix__coupon-btn:hover,
.recap-prix__coupon-btn:focus {
    color: #fff;
    opacity: 0.92;
}

/* ----- Modes de paiement ----- */

.td-pay__title,
.vol-pay-title,
.visa-card-block__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: var(--font);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
}

.td-pay__num,
.vol-pay-num,
.visa-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-site-2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
}

.td-pay__tabs,
.vol-pay__tabs,
.visa-pay__tabs,
.td-pay .nav-tabs,
.paiement-tabs > .nav-tabs {
    border: 0;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.td-pay__tabs > li,
.vol-pay__tabs > li,
.visa-pay__tabs > li,
.td-pay .nav-tabs > li,
.paiement-tabs > .nav-tabs > li {
    float: none;
    margin: 0;
}

.td-pay__tabs > li > a,
.vol-pay__tabs > li > a,
.visa-pay__tabs > li > a,
.td-pay .nav-tabs > li > a,
.paiement-tabs > .nav-tabs > li > a {
    padding: 6px 0;
    border: 0 !important;
    background: none !important;
    color: var(--text-color);
    opacity: 0.55;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
}

.td-pay__tabs > li.active > a,
.td-pay__tabs > li > a:hover,
.td-pay__tabs > li > a:focus,
.vol-pay__tabs > li.active > a,
.vol-pay__tabs > li > a:hover,
.vol-pay__tabs > li > a:focus,
.visa-pay__tabs > li.active > a,
.visa-pay__tabs > li > a:hover,
.td-pay .nav-tabs > li.active > a,
.td-pay .nav-tabs > li > a:hover,
.td-pay .nav-tabs > li > a:focus,
.paiement-tabs > .nav-tabs > li.active > a,
.paiement-tabs > .nav-tabs > li > a:hover,
.paiement-tabs > .nav-tabs > li > a:focus {
    color: var(--color-site-2);
    opacity: 1;
    border-bottom: 2px solid var(--color-site-2) !important;
}

.td-pay .tab-content,
.td-pay .tab-pane,
.vol-pay .tab-content,
.vol-pay .tab-pane,
.visa-pay .tab-content,
.visa-pay .tab-pane,
.paiement-tabs .tab-content,
.paiement-tabs .tab-pane {
    min-height: 0 !important;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.td-radio,
.td-agency,
.vol-pay-radio,
.vol-pay-agency,
.visa-radio,
.visa-agency,
.td-pay .custom-control.custom-radio,
.paiement-tabs .custom-control.custom-radio,
.pt-vente-tarif {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-color);
    cursor: pointer;
    font-weight: 400;
}

.td-radio input,
.td-agency input,
.vol-pay-radio input,
.vol-pay-agency input,
.visa-radio input,
.visa-agency input,
.td-pay .custom-control input,
.paiement-tabs .custom-control input,
.pt-vente-tarif input {
    margin-top: 3px;
    accent-color: var(--color-site-2);
}

.td-agency strong,
.vol-pay-agency strong,
.visa-agency strong {
    display: block;
    font-weight: 600;
}

.td-agency.pt-vente-select,
.vol-pay-agency.pt-vente-select,
.pt-vente-select {
    color: var(--color-site-2);
}

.td-pay__hint,
.vol-pay__hint,
.visa-pay__hint {
    margin: 8px 0 10px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.td-pay__coords,
.td-pay__ecom,
.td-pay__article,
.vol-pay__coords,
.vol-pay__ecom,
.vol-pay__article {
    margin-top: 10px;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-color);
}

.td-cgu,
.vol-pay-cgu,
.visa-cgu {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 16px;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-color);
    cursor: pointer;
    font-weight: 400;
}

.td-cgu a,
.vol-pay-cgu a,
.visa-cgu a {
    color: var(--color-site-2);
    text-decoration: underline;
}

.td-submit,
.btn.td-submit,
.btn-success.td-submit,
.vol-pay-submit,
.visa-submit,
#submit-validate.td-submit,
#submit-validate.vol-pay-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--border-radius);
   
    color: #fff;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
}

.td-submit:hover,
.td-submit:focus,
.btn.td-submit:hover,
.btn.td-submit:focus,
.btn-success.td-submit:hover,
.vol-pay-submit:hover,
.vol-pay-submit:focus,
.visa-submit:hover,
#submit-validate.td-submit:hover,
#submit-validate.vol-pay-submit:hover {
    color: #fff;
    /* background: var(--color-site-2); */
    filter: brightness(0.95);
}

.checkbox.td-cgu {
    display: block;
}

.checkbox.td-cgu label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-color);
}

.td-aside .pkg-total-list,
#vjs-recap .pkg-total-list {
    font-family: var(--font);
    color: var(--text-color);
}

.td-aside .pkg-total-list .recap-total,
#vjs-recap .pkg-total-list .recap-total {
    font-weight: 800;
    color: var(--color-site-1);
}

.td-aside .info-title-widget,
.td-aside .title-recap,
.td-aside .widget-title.title-recap,
#vjs-recap .title-recap,
#vjs-recap .widget-title.title-recap,
.payment-side-block .widget-title.title-recap,
.payment-side-block .title-recap {
    margin: 0 0 8px;
    font-family: var(--font);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-color);
}

.recap-voyages .payment-side-block > small,
.payment-side-block .recap-meta,
.payment-side-block .recap-map,
.payment-side-block .recap-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color);
    opacity: 1;
}

.payment-side-block .recap-meta .fa,
.payment-side-block .recap-map .fa,
.payment-side-block .recap-dates .fa {
    flex: 0 0 16px;
    width: 16px;
    color: var(--color-site-1);
    font-size: 14px;
    text-align: center;
}

.recap-voyages .td-recap,
.recap-voyages .recap-prix {
    margin-top: 14px;
}

/* ----- Grille formulaire client (aérien, réutilisable) ----- */

.td-client-sex,
.vol-client-sex {
    margin-bottom: 14px;
}

.input-radio-sex {
    font-family: var(--font);
    margin-bottom: 14px;
}

.input-radio-sex > div,
.input-radio-sex .select-border {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.input-radio-sex .radio,
.input-radio-sex .radio + .radio,
.vol-v3 .input-radio-sex .radio + .radio {
    position: relative;
    flex: 0 1 140px;
    margin: 0 !important;
}

.input-radio-sex .radio label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: #fff;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
}

.input-radio-sex .radio input[type="radio"] {
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
    accent-color: var(--color-site-2);
    cursor: pointer;
}

.input-radio-sex .radio:has(input:checked) label {
    border-color: var(--color-site-2);
    background: color-mix(in srgb, var(--color-site-2) 10%, #fff);
    color: var(--color-site-2);
}

.td-client-grid,
.vol-client-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    margin-bottom: 16px;
}

.td-client-grid--2,
.vol-client-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.td-field,
.vol-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.td-field label,
.vol-field label {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
}

.td-field .input-icon,
.vol-field .input-icon {
    position: relative;
    width: 100%;
}

.td-field .input-icon:before,
.td-field .icon-v2:before,
.vol-field .input-icon:before,
.vol-field .icon-v2:before {
    top: 0;
    height: 44px;
    line-height: 44px;
}

.td-field .form-group,
.td-field input,
.td-field select,
.td-field .bootstrap-select,
.td-field .bootstrap-select > .dropdown-toggle,
.td-field .iti,
.td-field .iti input,
.vol-field .form-group,
.vol-field input,
.vol-field select,
.vol-field .bootstrap-select,
.vol-field .bootstrap-select > .dropdown-toggle,
.vol-field .iti,
.vol-field .iti input {
    width: 100% !important;
    max-width: 100%;
    height: 44px;
    margin-bottom: 0;
}

.td-field .bootstrap-select .dropdown-toggle,
.vol-field .bootstrap-select .dropdown-toggle {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: #fff;
}

.td-field--wide,
.vol-field--wide {
    grid-column: span 2;
}

@media (max-width: 767px) {
    .td-client-grid,
    .td-client-grid--2,
    .vol-client-grid,
    .vol-client-grid--2 {
        grid-template-columns: 1fr;
    }

    .td-field--wide,
    .vol-field--wide {
        grid-column: auto;
    }
}