/*** FLORE V2 ***/
html{
	overflow: hidden;
}
header {
    padding-top: unset!important;
    position:relative;
}
#footer {
    margin-top: unset!important;
}

.side-bg {
    position: absolute;
    left: 100%;
    top: -100px;
    bottom: -100px;
    width: 30%;
    background: #231F1F;
    transform: translateX(-100%);
    z-index: -1;
}
@media screen and (max-width:990px){
	.side-bg{
    	display:none;
    }
    
    .photo-row__right:after, #module_container:after{
    	content:"";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100vw;
        background: #231F1F;
        transform: translateX(-50%);
        z-index: -1;        
    }
    .photo-row__right:after{
        height: calc(100% + 70px);    
    }
    #module_container:after{
    	bottom:-100px;       
    }
}

.content {
    border: 0px solid #93795b;
    padding-bottom: 0;
}
.content.new-content {
    padding-top: 70Px;
}
.content.etape1{
	padding-bottom: 70px;
}
.content.etape2, .content.etape3{
	padding-bottom: 30px;
}
.content-bis {
    padding-top: 0;
}

.tunnel_h1 {
    font-size: 39px;
    max-width: 500px;
    margin-bottom: 20px;
}

.tunnel-bis ul {
    display: flex;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.tunnel-bis .tunnel__step {
    padding: 10px 20px;
    flex: unset;
    border: 0px solid rgba(147, 121, 91, 0.2);
}
.tunnel-bis .tunnel__step{
	background-color: #E7E2DC!important;
}
.tunnel-bis .tunnel__step--active {
    background-color: black !important;
}

.tunnel-bis .tunnel__number {
    padding: 0;
    background-color: transparent;
    color: black;
}

.tunnel__step--active .tunnel__number {
    color: white;
}

.tunnel-bis .tunnel__step {
    background-color: rgba(147, 121, 91, 0.2);
}

.tunnel__title {
    font-size: 22px;
    font-weight: 600;
}

.photo-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.photo-row__left {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: white;
    width: 60%;
}

.photo-row__examples {
    display: flex;
    gap: 20px;
}

.photo-row__examples img {
    width: calc(50% - 10px);
}

.photo-row__left p {
    margin-bottom: 0;
}

.photo-row__right {
    border: 1px solid #93795b;
    width: calc(40% - 20px);
    position: relative;
    background: white;
}

.photo-row__right .form {
    flex-direction: column;
    padding: 30px;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    
}

.form__next {
    text-transform: none;
    font-size: 16px;
    font-weight: 500;
    width: fit-content;
    padding: 12px 20px;
    align-items: center;
    height: fit-content;
    line-height: normal;
}

#module_container {
    flex-direction: column-reverse;
    background-color: transparent;
    padding: 0px;
    position: relative;
    box-shadow: 0 126px 35px 0 rgba(0, 0, 0, 0.00), 0 81px 32px 0 rgba(0, 0, 0, 0.01), 0 45px 27px 0 rgba(0, 0, 0, 0.05), 0 20px 20px 0 rgba(0, 0, 0, 0.09), 0 5px 11px 0 rgba(0, 0, 0, 0.10);
}

#module_outils {
    background: white;
    padding: 5px 20px;
    box-shadow: -56px 0 16px 0 rgba(0, 0, 0, 0.00), -36px 0 14px 0 rgba(0, 0, 0, 0.01), -20px 0 12px 0 rgba(0, 0, 0, 0.05), -9px 0 9px 0 rgba(0, 0, 0, 0.09), -2px 0 5px 0 rgba(0, 0, 0, 0.10);
    display: flex;
    gap: 10px 20px;
    justify-content: space-between;
}

.modele {
    background: white;
    color: black;
    box-shadow: -56px 0 16px 0 rgba(0, 0, 0, 0.00), -36px 0 14px 0 rgba(0, 0, 0, 0.01), -20px 0 12px 0 rgba(0, 0, 0, 0.05), -9px 0 9px 0 rgba(0, 0, 0, 0.09), -2px 0 5px 0 rgba(0, 0, 0, 0.10);
}

.outil {
    color: black;
    display: flex;
    gap: 5px 16px;
    align-items: center;
    padding: 0;
    border-bottom: 0;
}

.outil--position {
    flex-direction: column;
}

.outil.outil--couleurs {
    display: flex;
    align-items: center;
    gap: 5px 10px;
}

.couleur {
    border: 1px solid black !important;
}

.outil span {
    margin-bottom: 0px;
    padding-top: 0px !important;
        min-width: 60px;
}

.outil-title {
    font-weight: 500;
}

.sep-outil {
    height: auto;
    width: 1Px;
    background: #93795B;
}

#choix_veranda {
    margin-top: 0;
}

#valider {
    width: fit-content;
    height: fit-content;
    margin-top: 0px;
    margin-left: auto;
    margin-right: 0px;
    padding: 12px 20px;
    font-size: 16px;
}

.validation-step2 {
    display: flex;
    width: 100%;
}

.noUi-handle.noUi-handle-lower {
    border-radius: 50%;
    width: 24px !important;
    height: 24px !important;
    border: 0;
    background: #93795B;
    box-shadow: unset;
    top: -7px;
}

.noUi-handle.noUi-handle-lower:before,
.noUi-handle.noUi-handle-lower:after {
    display: none;
}

#echelle {
    border-radius: 20px;
    background: #E9E4DE;
    border: 0;
    width: 220px;
    height: 10px;
    margin-bottom: 0px;
}

.simu-thanks {
    color: #93795B;
    font-size: 30px;
    font-weight: 600!important;
}

.simu-sub {
    font-size: 20px;
}

.simu-contact label span {
    display: none;
}

.simu-contact input {
    border-color: #93795B !important;
    background: white;
}

.form {
    column-gap: 20px;
}

.etape3 p a {
    font-weight: bold;
    color: black;
}

.form-error {
    display: flex;
    text-align: center;
    justify-content: center;
    margin: 10px 20px;
    color: red;
}

.module img {
    width: 100%;
    margin-bottom:-4px;
}

.simu-fin {
    font-weight: 700;
}

simu-fin-txt {
    font-size: 20px;
}
.dropzone{
	font-family: 'Montserrat'!important;
}
#dropzone p {
    font-size: 20px;
    font-family: 'MONTSERRAT';
}
.file-name{
	color: black;
}

@media screen and (min-width:990px){
    .photo-row__right .form-error{
        position: absolute;
        color: red;
        left: 0;
        top: 0;
        right: 0;
    }
    #module_outils{
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 9999;
        width: unset;
     }
}
@media screen and (max-width:990px){
    .content.new-content {
        padding-top: 60Px;
    }
    .photo-row{
    	flex-direction: column;
    }
    .photo-row__left, .photo-row__right {
        width: 100%;
    }
    .tunnel_h1, .simu-fin{
        font-size: 35px;
    }
    .tunnel__step--active .tunnel__title{
    	font-size: 20px;
    }
    #module_outils {
        flex-wrap: wrap;
        padding: 15px 15px;
    }
    .sep-outil{
    	display:none;
    }
    .outil--couleurs {
        flex-wrap: wrap;
        width: 60%;
    }
    .couleurs__example{
    	width:100%;
        text-align: left;
    }
    .simu-thanks{
    	font-size: 24px;
    }
    
    .simulation_realisations_list {
        grid-template-columns: 1fr!important;
    }
}
@media screen and (max-width:767px){
    .content.new-content {
        padding-top: 45Px;
    }
    #dropzone p {
        font-size: 18px;
    }
    .tunnel-bis ul{
        gap: 10px;
        justify-content: center;
    }
    li.tunnel__step:not(.tunnel__step--active) span.tunnel__title {
        display: none;
    }
    .tunnel_h1{
        text-align: center;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 30px;
    }
    .simu-fin{
        font-size: 30px;
        text-align:center;
    }
    .simu-fin-txt{
    	text-align:center;
    }
    
    .tunnel__step--active .tunnel__title{
    	font-size: 18px;
    }
    .photo-row__left {
        padding: 0px;
        background: transparent;
    }
    .photo-row__examples{
    	gap: 10px;
    }
    .photo-row__examples img {
        width: calc(50% - 5px);
    }
    .dropzone-container .dropzone {
        flex-direction: row;
        padding: 5px;
    }
     .dropzone-container svg{
        max-width: 50px;
    }
    .photo-row__right .form.form--etape2 {
    	padding: 10px;
    }
    .form__next {
    	margin-right: auto;
    }
    .tunnel-bis .tunnel__step {
    	padding: 10px 16px;
        gap: 12px;
    }
    
    .modele {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 10px 15px;
    }
    .modele img {
    	width: fit-content;
        max-width: 100px;
        margin-right: auto;
    	margin-left: auto;
    }
    .outil--position {
        width: calc(40% - 10px);
        border-left: 1px solid black;
        padding-left: 10px;
    }
    #echelle {
    	width: 125px;
    }
    .outil span, #module_outils {
        text-align: left;
    }
    .outil--position{
    	align-items: start;
    }
    #module_outils{
    	gap: 10px 10px;
    }
    .noUi-handle.noUi-handle-lower {
        border-radius: 50%;
        width: 20px !important;
        height: 20px !important;
        top: -4px;
    }
    #valider{
    	margin-right: auto;
    }
    #module_container{
    	gap:0;
    }
    
    .simu-thanks{
    	font-size: 22px;
    }
    .simu-sub{
    	font-size: 18px;
    }
    .txt-simu-end{
    	font-size: 16px;
    }
    
    .simu-avis-head {
        flex-direction: column;
        text-align: center;
    }
    h3.simu-avis-t{
    	font-size: 24px;
    	font-weight: 600!important;
    }
}


/*** SAVE.PHP : AVIS - CSS GLOBAL ***/

.temoignages_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.temoignages_grid .temoignage-card {
    background: white;
}
.temoignage-card {
    height: auto;
    background: var(--dark);
}

.temoignages_grid .temoignage-card .boxitem {
    flex-direction: column;
}
.temoignage-card .boxitem {
    display: flex;
    height: 100%;
}

.temoignages_grid .img-avis,
.temoignages_grid .img-avis img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.img-avis {
    height: auto;
    width: 30%;
    object-fit: cover;
}

.temoignages_grid .temoignage-card .cnt-avis {
    width: 100%;
}
.cnt-avis {
    padding: 20px;
    align-self: center;
    width: 70%;
}

.temoignages_grid .avis-link-more {
    text-transform: none;
    text-decoration: underline;
    font-weight: 500;
    color: black !important;
    font-size: 16px;
}
.avis-link-more {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 20px;
    display: inline-flex;
    transition: 0.3s ease-in-out;
}

.avis-link-more:hover {
    color: white !important;
}

.liststars {
    display: flex;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: -2px;
    margin-right: -2px;
    top: -5px;
    position: relative;
    z-index: 3;
    list-style: none;
    align-items: center;
    width: 72px;
}

.avis-titre {
    color: var(--brun);
    font-weight: 700;
}

.note-avis {
    display: flex;
    width: 100%;
    align-items: center;
}

.boxnote {
    color: black;
}

.icn-avis {
    display: none;
    height: 20px;
    margin-bottom: 13px;
}

.temoignage-card p {
    margin-bottom: 0px;
}

.avis-txt,
.avis-txt * {
    color: black !important;
    font-size: 16px !important;
}

.st-temoignage {
    font-weight: 700;
}
.temoignage-card {
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.24);
}
.avis-titre {
    font-size: 20px;
    font-style: italic;
}


@media screen and (max-width:1200px) {
    .temoignages_list {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width:1100px) {
    .temoignages_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width:767px) {
    .boxitem {
        flex-direction: column;
    }

    .img-avis,
    .cnt-avis {
        width: 100%;
    }

    .img-avis {
        height: 230px !important;
    }
    
    .temoignages_grid .img-avis {
        height: auto !important;
    }
}
@media screen and (max-width:700px) {
    .temoignages_grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* AVIS : GOOGLE PLUGIN - à garder ? */

.custom-google-rating {
    width: calc(100vw - 135px);
    display: flex;
    position: relative;
    justify-content: end;
    z-index: 4;
}

.custom-google-rating .ti-widget.ti-goog {
    position: absolute;
    left: 100%;
    bottom: 0;
    width: fit-content !important;
    transform: translateX(-100%);
}

.custom-google-rating .ti-rating {
    color: black !important;
}

.custom-google-rating .ti-widget.ti-goog .ti-header {
    border-radius: 50px !important;
}
@media screen and (max-width:990px) {
    .custom-google-rating {
        width: calc(100vw - 95px);
    }
}

@media screen and (max-width: 767px) {
    .custom-google-rating {
        justify-content: start;
        width: 100%;
    }
    .custom-google-rating .ti-widget.ti-goog {
        position: relative;
        left: unset;
        bottom: unset;
        width: fit-content !important;
        transform: translateX(-0%);
    }
    .custom-google-rating .ti-widget.ti-goog .ti-header {
        padding: 12px 20px !important;
    }    
}


/**** SAVE.PHP - new css ****/

p.simu-fin-txt {
    font-size: 20px;
}

.simu-avis {
    margin: 50px 0 100px;
}

.simu-avis-head {
    margin: 20px 0;
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

h3.simu-avis-t {
    font-weight: 500;
    max-width: 470px;
}

.avis-screen {
    box-shadow: 0 45px 13px 0 rgba(0, 0, 0, 0.00), 0 29px 12px 0 rgba(0, 0, 0, 0.01), 0 16px 10px 0 rgba(0, 0, 0, 0.05), 0 7px 7px 0 rgba(0, 0, 0, 0.09), 0 2px 4px 0 rgba(0, 0, 0, 0.10);
    border-radius: 100px;
}



/*** SAVE.PHP - REALISATIONS ***/

.simulation_realisations_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.rea-card {
    background: #231F1F;
}

.rea-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #231F1F;
}

.tax-title-wrap {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.tax-title {
    font-weight: 700;
    color: var(--brun);
    transition: 0.3s ease-in-out;
    max-width: calc(100% - 135px) !important;
    padding: 15px;
    font-size: 18px;
}

.rea-card:hover .tax-title {
    color: white;
}

.rea-card img {
    aspect-ratio: 4/2;
    width: 100%;
    object-fit: cover;
    height: auto;
}

.btn-tax {
    min-width: 126px !important;
    padding: 10px 18px;
    background: #93795B;
    color: white;
    align-items: center;
    display: flex;
    font-weight: 600;
    text-align: center;
}

.rea-media {
    width: 100%;
    margin: 0;
    height: fit-content;
    display: flex;
}


.merci__row {
    display: flex;
}
.content__left_step3 {
    width: 55%;
    z-index: 2;
}
.content__right_step3 {
    width: 45%;
    position:relative;
}
.step3_right_bg{
	position: absolute;
    left: 50px;
    top:-70px;
    width: calc(100% + (100vw - 1280px) / 2);
    bottom:-70px;
    background:#231F1F;
}
.merci-img {
    display: flex;
    width: 100%;
}
.step3_right_cnt{
	position: absolute;
    left: 50px;
    top:-70px;
    width: calc(100% + (100vw - 1280px) / 2);
    bottom:-70px;
    display:flex;
    flex-direction:column;
    align-self: end;
}
.a-bientot {
    color: white;
    font-size: 62px;
    font-weight: 700;
    margin: 40px 20px 20px;
}
.step3_right_cnt img{
	    max-width: 700px;
    margin-left: -40px;
}
@media screen and (max-width:1400px){
	.step3_right_bg, .step3_right_cnt{
        width: calc(100% + 80px);
    }
}
@media screen and (max-width:1200px){
    .merci__row {
        flex-direction: column;
    }
    .content__left_step3, .content__right_step3{
     	width:100%;
    }
    .content__right_step3 {
        margin-top: 50px;
    }
    .step3_right_bg {
        left: 50%;
        top: 0px;
        width: 100vw;
        bottom: unset;
        height:100%;
        background: #231F1F;
        transform: translateX(-50%);
         filter: brightness(0.8);
    }
    .step3_right_cnt{
    	position: relative;
        top: unset;
        left: unset;
        bottom: unset;
        width: 100%;
        align-items: center;
        height: 100%;
        justify-content: end;
    }
    .step3_right_cnt img {
        max-width: 600px;
    }
}
@media screen and (min-width:767px) and (max-width:990px){
    .merci-img{
        max-height: 600px;
        object-fit: cover;
        object-position: bottom;
    }
}
@media screen and (max-width:767px){
    .step3_right_cnt img {
        max-width: 100%;
        margin-left: 0;
    }
    .simu-thanks{
    	margin-top: 30px;
	}
}

@media screen and (min-width:768px){
    .merci__row li.tunnel__step {
        max-width: fit-content;
        margin-bottom: 30px;
    }
    .merci__row #tunnel {
        width: max-content;
    }
}


.test {
    height: 30px;
    display: flex;
}