.container-builder {padding: 0 25px;}
.layout-builder {display: flex; max-height: calc(100vh - 77px); overflow: hidden; min-height: calc(100vh - 77px);}
.admin-bar .layout-builder {max-height: calc(100vh - 109px); min-height: calc(100vh - 109px);}
.builder-col {flex: 1;}
.builder-col1 {background: white; border-right: solid 1px var(--color-border); max-width: 700px; display: flex; flex-direction: column;}
.builder-col2 {background: #ECEDF8;}
.builder-breadcrumb {padding: 20px 25px; border-bottom: solid 1px var(--color-border);}
.builder-breadcrumb ul {margin: 0; list-style: none; display: flex; gap: 20px; padding: 0;}
.builder-breadcrumb ul li {position: relative; font-size: 14px; color: var(--color-text-gray); padding: 2px 10px; border-radius: 50px; background: var(--color-block);}
.builder-breadcrumb ul li:before {font-family: "Font Awesome 6 Pro"; font-weight: 400; margin-right: 6px; color: currentColor; font-size: 10px;}
.builder-breadcrumb ul li a {color: currentColor; text-decoration: none !important;}
.builder-breadcrumb ul li.active {background: var(--color-primary); color: white; font-weight: 600;}
.builder-breadcrumb ul li.active:before {content: "\f304";}
.builder-breadcrumb ul li:not(:first-child):after {content: "\f054"; font-family: "Font Awesome 6 Pro"; font-weight: 400; position: absolute; left: -14px; color: var(--color-text-gray); font-size: 10px; top: 5px; opacity: .6;}

.builder-breadcrumb ul li.done {background: var(--color-text); color: white; font-weight: 600;}
.builder-breadcrumb ul li.done:before {content: "\f00c";}
.builder-form {padding: 25px; display: flex; flex-direction: column; height: 100%;}
.builder-form h2 {display: flex; align-items: center; gap: 10px; font-size: 18px; padding-bottom: 25px;}
.builder-form h2 svg {height: 36px; background: #EEF0FE; fill: var(--color-primary); border-radius: 10px; padding: 8px;}
.bloc-builder-form {display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px;}
.builder-field {display: flex; flex-direction: column; width: calc(50% - 8px);}
.builder-field label {font-weight: 600; padding-bottom: 5px;}
.builder-field input {border-radius: 10px; border: solid 1px var(--color-border); height: 40px; padding: 8px 15px;}
.builder-field input:focus-visible {outline: none !important; border-color: var(--color-primary);}
.builder-btn-nav {border-top: solid 1px var(--color-border); margin-top: auto; padding-top: 20px; display: flex; gap: 20px;}
.builder-btn-nav .btn1 {display: flex; gap: 6px; align-items: center; padding: 6px 20px; border-radius: 10px; font-weight: 600;}
.builder-btn-nav .btn1 svg {fill: white; height: 14px;}
.builder-btn-nav .builder-btn-next {margin-left: auto; border: solid 1px var(--color-primary)}
.builder-btn-nav .builder-btn-prev {background: none; color: var(--color-text-gray); border: solid 1px var(--color-border);}
.builder-btn-nav .builder-btn-prev svg {fill: var(--color-text-gray);}
.builder-toolbar {padding: 16px 15px; border-bottom: solid 1px var(--color-border); background: white; display: flex; gap: 10px;}
.builder-toolbar-btn {display: flex; gap: 5px; align-items: center; border: solid 1px var(--color-border); border-radius: 8px; padding: 3px 10px; font-size: 14px; color: var(--color-text-gray); transition: .3s; cursor: pointer;}
.builder-toolbar-btn:hover {color: var(--color-text); border-color: var(--color-text);}
.builder-toolbar-btn:hover svg {fill: var(--color-text);}
.builder-toolbar-btn .builder-toolbar-btn-flag {height: 15px; width: auto; margin-right: 5px;}
.builder-toolbar-btn:after {content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: 10px; opacity: .6; padding-left: 6px;}
.builder-toolbar-btn svg {height: 16px; fill: var(--color-text-gray); transition: .3s;}
.builder-toolbar-btn-zoom {margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--color-text-gray);}
.builder-toolbar-btn-zoom .builder-toolbar-btn:after {display: none;}
.builder-preview img {display: block; max-width: 500px; margin: 40px auto; border: solid 1px var(--color-border);}
.builder-header-btn {margin-left: auto; display: flex; align-items: center; gap: 10px;}
.builder-header-btn a {display: flex; align-items: center; gap: 5px; border: solid 1px var(--color-border); border-radius: 8px; padding: 3px 10px; font-size: 14px; color: var(--color-text-gray); transition: .3s; cursor: pointer;}
.builder-header-btn .builder-header-btn-download {color: white; background: var(--color-primary); border-color: var(--color-primary);}
.builder-header-btn a svg {fill: currentColor !important; height: 16px; opacity: 1;}
.builder-header-btn a:hover {color: var(--color-text); border-color: var(--color-text);}
.builder-header-btn .builder-header-btn-download:hover {color: white; background: var(--color-text);}



/* START PAGE DE PAIEMENT */
.head-pre-builder .blocs-head-pre-builder {justify-content: center;}
.head-pre-builder .blocs-head-pre-builder .builder-header-pay-return {margin-right: auto;}
.head-pre-builder .blocs-head-pre-builder .builder-header-pay-secure {margin-left: auto; margin-top: 0; margin-bottom: 0; display: flex; gap: 10px; font-size: 14px; align-items: center;}
.head-pre-builder .blocs-head-pre-builder .builder-header-pay-secure svg {opacity: 1; fill: var(--color-primary); height: 16px;}
.head-pre-builder .builder-header-btn-gray {display: flex; align-items: center; gap: 5px; border: solid 1px var(--color-border); border-radius: 8px; padding: 3px 10px; font-size: 14px; color: var(--color-text-gray); transition: .3s; cursor: pointer;}
.head-pre-builder .builder-header-btn-gray svg {height: 14px; opacity: 1; fill: currentcolor;}
.sect-builder-pay {max-width: 1200px; margin: 60px auto;}
.content-builder-pay {display: flex; gap: 30px;}
.content-builder-pay > div {flex: 1; display: flex; flex-direction: column; gap: 15px;}
.bloc-builder-pay-preview {border: solid 1px var(--color-border); border-radius: 10px; overflow: hidden;}
.bloc-builder-pay-preview .title {margin: 0; background: white; padding: 10px 16px; display: flex; align-items: center; gap: 10px;}
.bloc-builder-pay-preview .title svg {height: 30px; background: #EEF0FE; fill: var(--color-primary); border-radius: 10px; padding: 8px; width: 30px;}
.bloc-builder-pay-preview .title .label-format-doc {margin-left: auto; background: #EBEBEB; font-size: 12px; color: var(--color-text-gray); padding: 1px 10px; border-radius: 50px; font-weight: 600;}
.builder-pay-preview-img {background: #ECEDF8; padding: 40px; max-height: 400px; overflow: hidden;}
.builder-pay-preview-img > img {max-width: 400px; margin: auto; display: block;}
.builder-pay-preview-text {display: flex; gap: 20px; align-items: center; padding: 10px 16px; background: #F7F7F7; border-top: solid 1px var(--color-border);}
.builder-pay-preview-text p {margin: 0; font-size: 14px; color: var(--color-text-gray);}
.builder-pay-preview-text p:last-child {margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; color: #00A63E; font-weight: 600;}
.builder-pay-preview-text p:last-child svg {height: 14px; fill: currentColor;}
.bloc-builder-pay-price {background: var(--color-primary); border-radius: 10px; padding: 15px 20px;}
.bloc-builder-pay-price .title {margin: 0; color: #d3e0f7; font-weight: 600; text-transform: uppercase; font-size: 14px;}
.bloc-builder-pay-price .price {margin: 0; color: white; font-size: 40px; font-weight: 900;}
.bloc-builder-pay-price .text-price {margin: 0; color: #d3e0f7; font-size: 14px;}
.bloc-builder-pay-price ul {list-style: none; color: white; border-top: solid 1px #6d85f8; padding-top: 15px; margin-top: 15px; padding-left: 0; font-size: 14px; margin-bottom: 0;}
.bloc-builder-pay-price ul li {font-weight: 600; padding: 2px 0;}
.bloc-builder-pay-price ul li:before {content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 400; margin-right: 10px; color: white;}
.bloc-builder-pay-av {display: flex; gap: 15px; align-items: center;}
.bloc-builder-pay-av .builder-pay-av-bloc {background: white; border-radius: 10px; border: solid 1px var(--color-border); padding: 10px; flex: 1; text-align: center;}
.bloc-builder-pay-av .builder-pay-av-bloc svg {height: 25px;}
.bloc-builder-pay-av .builder-pay-av-bloc .title {font-weight: 600; font-size: 14px; margin: 0;}
.bloc-builder-pay-av .builder-pay-av-bloc p:not(.title) {font-size: 12px; color: var(--color-text-gray); margin: 0;}
.bloc-builder-pay-cgv p {margin: 0; color: var(--color-text-gray); font-size: 14px;}
.bloc-builder-pay-form {background: white; border: solid 1px var(--color-border); padding: 15px 20px; border-radius: 10px;}
.bloc-builder-pay-form h1 {font-size: 20px;}
.bloc-builder-pay-form .gform-footer .button {display: block; width: 100%; background: var(--color-primary); border: none; padding: 14px; border-radius: 10px; color: white; font-weight: 600; box-shadow: 1px 0px 20px 6px #0056d23b;}
.builder-pay-form-secure {font-size: 13px; color: var(--color-text-gray); text-align: center; margin-top: -5px;}
.avis-pay {max-width: 1200px; margin: auto;}
.bloc-builder-pay-form-t1 {margin: 5px 0 10px 0;}
.bottom-form-price {background: #F3F3F3; padding: 20px 15px; border-radius: 10px; margin-top: -64px; position: relative;}
.bottom-form-price p:first-child {margin: 0; display: flex; gap: 5px; font-weight: 600;}
.bottom-form-price p:first-child span {margin-left: auto; font-weight: 900;}
.bottom-form-price p:last-child {margin: 0; color: var(--color-text-gray); font-size: 14px; padding-top: 5px;}
.sticky-payment-mobile {display: none;}
/* END PAGE DE PAIEMENT */


@media screen and (min-width: 741px) {
    .builder-nav-switch-mobile, .builder-breadcrumb-mobile, .builder-header-logo-mobile {display: none;}
    .bloc-builder-pay-form {position: sticky; top: 20px;}
}

@media screen and (max-width: 740px) {
    .blocs-head-pre-builder > svg, .blocs-head-pre-builder p, .builder-breadcrumb, .builder-header-logo-desktop {display: none;}
    .builder-nav-switch-mobile {position: fixed; width: 100%; bottom: 0; z-index: 100; display: flex; padding: 0px; background: #fff; border-top: 1px solid var(--color-border); box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.06); justify-content: center;}
    .builder-nav-switch-mobile a {display: flex; align-items: center; justify-content: center; flex: 1; padding: 5px; color: var(--color-text-gray); font-weight: 600; text-decoration: none; cursor: pointer; transition: 0.2s ease; flex-direction: column; font-size: 13px;}
    .builder-nav-switch-btn-form:before {content: "\f304"; font-family: "Font Awesome 6 Pro"; font-weight: 300; color: currentColor; font-size: 15px;}
    .builder-nav-switch-btn-preview:before {content: "\f15c"; font-family: "Font Awesome 6 Pro"; font-weight: 300; font-size: 15px;}
    .builder-nav-switch-mobile a.active {color: var(--color-primary); border-top: solid 2px var(--color-primary);}
    .builder-nav-switch-mobile a.active:before {font-weight: 900;}
    .builder-col1, .builder-col2 {display: none;}
    .builder-col2 {overflow: hidden;}
    .builder-toolbar {overflow: scroll;}
    .builder-preview img {max-width: 100%; padding: 30px; margin: 0;}
    .builder-col1.is-visible-mobile, .builder-col2.is-visible-mobile {display: block;}
    .builder-breadcrumb-mobile {padding: 20px 25px; border-bottom: solid 1px var(--color-border);}
    .builder-breadcrumb-mobile p {margin: 0; font-size: 14px;}
    .builder-breadcrumb-mobile span {height: 4px; display: block; width: 100%; background: #E8ECF2; border-radius: 50px; margin-top: 5px; position: relative; overflow: hidden;;}
    .builder-breadcrumb-mobile span:before {content:""; background: var(--color-primary); display: block; height: 4px; width: 33.33%;}
    .builder-field {width: 100% !important;}
    .builder-form, .builder-breadcrumb-mobile {padding: 15px;}
    .container-builder {padding: 0 15px;}
    .layout-builder {max-height: calc(100vh - 55.73px - 55px); min-height: calc(100vh - 55.73px - 55px);}
    .builder-btn-nav {position: fixed; width: 100%; left: 0; bottom: 55px; z-index: 10000; background: white; padding: 10px 15px;}
    .builder-form {overflow: scroll; padding-bottom: 75px; max-height: 100%;}
    .builder-form h2 {padding-top: 0; padding-bottom: 15px;}
    .bloc-builder-form {margin-bottom: 90px;}
    .builder-btn-nav .btn1 {font-size: 14px;}
    .content-builder-pay {flex-direction: column-reverse;}
    .head-pre-builder .blocs-head-pre-builder .builder-header-pay-secure {display: none;}
    .sect-builder-pay {margin: 30px 0;}
    .bottom-form-price {margin-top: -85px;}
    .builder-pay-preview-img > img {max-width: 100%;}
    .bloc-review-trust .date-bloc-review-trust {font-size: 14px;}
    .sticky-payment-mobile {position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; padding: 10px 15px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid #e5e5e5; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;}
    .sticky-payment-mobile.is-visible {display: block; opacity: 1; visibility: visible; transform: translateY(0);}
    .sticky-payment-mobile-btn {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; box-sizing: border-box; background: var(--color-primary); color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; text-align: center;}
    
}