.row_i {

    position: absolute;

    width: 100%;

    top: 150px;

  }

  .row_6i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s6 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray1);

    height: var(--cardHeight);

    width: var(--rn-width6);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_4i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s4 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray2);

    height: var(--cardHeight);

    width: var(--rn-width4);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_3i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

    flex-wrap: wrap;

  }

  .card_s3 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray3);

    height: var(--cardHeight);

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_2i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s2 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray2);

    height: var(--cardHeight);

    width: var(--rn-width2);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_2-5i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s2-5 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray2);

    height: var(--cardHeight);

    width: var(--rn-width2);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_1-2i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s1-2 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--black);

    height: var(--cardHeight);

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_1i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

    align-items: center;

}

  .card_s1 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--black);

    height: var(--cardHeight);

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_1-5i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s1-5 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--black);

    height: var(--cardHeight);

    width: var(--rn-width1-5);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  

  .guide_path {

    display: flex;

    width: 100%;

    flex-direction: row;

    justify-content: center;

    position: relative;

    background-color: transparent;

    min-height: 200vh;

  }

  

  .unit1 {

    height: 100%;

    background-color: rgba(82, 198, 218, 0.137);

    margin: 0 var(--um);

    width: var(--unit);

    min-height: 1200vh;

}

a:hover{
    text-decoration: none !important;
    color: inherit !important;
}
  
dl, ol, ul {
    margin-bottom: 0rem !important;
}
  
.copyrightSection p{
    margin-bottom: 0px !important;
}

.linkcondition:hover{
    color: white !important;
}
     

button:focus{

    border: none !important;

    outline: none !important;

}



.card {

    background-color: transparent !important;

    background-clip: border-box;

    border: none !important;

    border-radius: 0 !important;

}


dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0rem !important;
}


/*/------------------ breadcrumb ------------/*/

    .breadcrumb_Container{

        display: flex;

        justify-content: center;

        width: 100%;

        margin: 0;

    }

    .breadcrumb{

        border-bottom: 1px solid var(--gray2);

        border-radius: 0 !important;

    }

    .breadcrumb, .retour {

        display: flex;

        height: 60px;

        width: var(--rn-width1);

        margin: 0 var(--um);

        box-sizing: border-box;

        background-color: white !important;

        margin-bottom: 0 !important;

        font-family: NouvelRRegular;

        flex-direction: row;

        align-items: center;

    }

    

    .breadcrumb a, .retour a{

        font-family: 'NouvelRRegular';

        font-size: 13px;

        color: #000000;

    }

    .breadcrumb svg{

        width: 26px;

        height: 10px;

        fill: currentcolor;

        color: var(--yellow);

        font-family: 'NouvelRBold';

    }

/*/------------------ breadcrumb(retour) ------------/*/

.retour svg{

    width: 33px;

    height: 19px;

    fill: currentcolor;

    color: var(--yellow);

    stroke-width: 0.5;

    transform: scaleX(-1);

}

.retour a{

    font-family: 'RenaultGroupSemibold';

    font-size: 17px;

}

  

/*/------------- mainTitle ----------/*/

  .mainTitle{

      margin: 0 var(--um);

      box-sizing: border-box; 

      text-align: center;

      font-family: NouvelRBold;

    }

    .mainTitle .title {

        font-size: 35px;

        font-weight: bold;

        font-family: NouvelRBold;

        margin-bottom: 14px;

    }

    .mainTitle .title.exeption {

      margin-top: 0px;

    }

    .mainTitle .semititle {

        font-size: 16px;

        margin-bottom: 0px;

        width: 64%;

        margin: auto;

        font-family: RenaultGroupSemibold;

        color: var(--gray3);

    }



/*-------------- car details And Carousel ------------*/

    .cardetailsAndCarousel {

        width: var(--rn-width1);

        margin: 0 var(--um);

        box-sizing: border-box;

        display: flex;

        justify-content: space-between;

    }

/*------ car details -------*/

    .carDetails {

        width: var(--rn-width3);

        box-sizing: border-box;

        margin: 0;

        border: 1px solid var(--gray2);

        padding: 15px 18px;

    }

    .carName{

        font-family: 'NouvelRbold';

        font-size: 25px;

        text-transform: uppercase;

        margin: 0;

        margin: 5px 0 0 0;

    }

    .carDesc {

        font-family: 'NouvelRRegular';

        color: var(--gray3);

        margin: 0;

        margin: 5px 0 0 0;

    }

    .Identifiant {

        font-family: 'RenaultGroupSemibold';

        margin: 5px 0 0 0;

    }

    .Identifiant span{

        font-family: 'NouvelRRegular';

    }

    .carPrice{

        font-family: 'NouvelRBold';

        font-size: 25px;

        margin: 5px 0 0 0;

    }

    .carPrice span{

        font-family: 'NouvelRRegular';

        font-size: 15px;

    }

    .location{

        font-family: 'NouvelRRegular';

        text-transform: uppercase;

        font-size: 15px;

        margin: 5px 0 0 0;

    }

    .voirPlusdiv{

        width: 100%;

        text-align: right;

        margin-bottom: 30px;

    }

    .voirPlusdiv .voirPlus{

        font-family: 'NouvelRRegular' !important;

        color: var(--gray3) !important;

        text-decoration: underline !important;

        font-size: 13px;

    }

    .Appelez_btn, .interesse_btn, .financement_btn {

        height: 46px;

        font-family: 'RenaultGroupSemibold';

        margin: 10px 0;

        width: 100%;

        display: flex;

        justify-content: flex-start;

        padding: 5px 15px;

        align-items: center;

        text-align: left;

    }

    .Appelez_btn{

        background-color: #000000;

        color: white;

    }

    .Appelez_btn svg, .interesse_btn img, .financement_btn svg{

    margin-right: 30px;

    }
	.modele_from_modal .body .rightSide img {
		width:100% !important;
	}



/*----------carousel-------*/

    .todispear{

        width: 65.8%;

    }

    .carousel-control-next-icon, .carousel-control-prev-icon {

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;

        background-repeat: no-repeat;

        background-position: center;

        background-size: contain;
    }

    .carousel-control-next-icon{

        transform: scaleX(-1);

    }

    .carousel-control-next-icon, .carousel-control-prev-icon {

        width: 100% !important;
        height: 75px !important;
        background-color: black !important;

    }

    .carousel-indicators{
        z-index: 1 !important;
    }

    .carousel-indicators li {

        width: 15px !important;

        height: 12px !important;

        opacity: 1 !important;

        border-radius: 50% !important;

        position: relative;

        margin-right: 0px !important;

    }

    

    .carousel-indicators .active {

        background-color: transparent;

        box-shadow: inset 0 0 0 1px var(--yellow);

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ede04a' class='bi bi-record-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16' fill='%23ede04a'/%3E%3Ccircle cx='8' cy='8' r='4.5' fill='%23ede04a'/%3E%3C/svg%3E");

        background-size: cover;

        background-position: center;

    }

    .carousel-control-next, .carousel-control-prev{
        opacity: 1 !important;
        width: 3.5% !important;
    }


/*------------------- ManuelleDiesel ----------------------*/

.ManuelleDiesel {

    border: 1px solid var(--yellow);

    font-family: 'NouvelRRegular';

    border-radius: 4px;

    padding: 5px 13px;

    margin: 0 5px;

    margin-bottom: 10px;

}     

/*------------------- Info ----------------------*/

.infoConatiner{

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 10px 0;

    align-items: center;

}

.info {

    font-family: 'RenaultGroupSemibold';

    color: var(--gray3);

    display: flex;

    flex-direction: column;

    align-items: center;

    margin: 0 22px;

}

.info img{

    width: 28px;

    margin-bottom: 10px;

}

.info2 img{

    width: 28px;

    margin-right: 5px;

}

.info2 {

    font-family: 'RenaultGroupSemibold';

    color: var(--gray3);

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    margin-right: 10px;

}



/* ------------- equipement / options ---------- */

    .equipement_options_container {

        width: var(--rn-width1);

        margin: 0 var(--um);

        box-sizing: border-box;

        text-align: center;

        font-family: NouvelRBold;

    }

    .equipement-options {

        display: flex;

        text-align: left;

        flex-direction: row;

        align-items: flex-start;

        justify-content: space-between;

        gap: 77px;

    }



    .type {

        height: 150px;

        width: 13%;

        box-sizing: border-box;

    }



    .details-SECURITE, .details-CONFORT,

    .details-ESTHETIQUE, .details-AUTRE {

        width: 100%;

        display: none;

    }

    .details-SECURITE.active, .details-CONFORT.active,

    .details-ESTHETIQUE.active, .details-AUTRE.active {

        display: block;

    }



    .details {

        display: flex;

        text-align: left;

        justify-content: flex-start;

        gap: 10.5%;

        flex-direction: row;

        overflow-x: hidden;

        height: 255px;

        margin-top: 19px;

    }



    .details::-webkit-scrollbar,

    .details::-webkit-scrollbar {

        width: 2px;

        background-color: var(--gray1);

    }



    .details::-webkit-scrollbar-thumb {

        background-color: var(--yellow); 

        border-radius: 5px;

    }



    .col1,

    .col2 {

        width: 41.5%;

        box-sizing: border-box;

        text-align: left;

    }

    .details .col1 p,

    .details .col2 p {

        font-family: NouvelRRegular;

        letter-spacing: 0.5px;

        padding: 0;

        margin: inherit;

        padding-left: 20px;

        font-weight: 500;

    }

    .desc{

        font-family: NouvelRRegular;

        letter-spacing: 0.5px;

        margin: inherit;

        font-weight: 500;

        margin-bottom: 30px;

        margin-top: 20px;

    }

    .details .col1 p::after,

    .details .col2 p::after {

        content: "";

        background-color: var(--gray1);

        height: 1px; 

        width: 100%;

        display: block;

        margin: 10px 0 10px -17px;

    }



    .btn1, .btn2,

    .btn3, .btn4{

        border-left:0px;

        border-right: 0px;

        border-bottom: 0px;

        border-top: 0px;

        font-size: 19px;

        margin: 16px 0 0px 20px;

        font-family: NouvelRRegular;

        cursor: pointer;

        margin-left: 0px;

    }

    .btn1.active, .btn2.active,

    .btn3.active, .btn4.active{

        border-left: 2px solid var(--yellow) !important;

        font-family: NouvelRBold;

        margin-left: 0px;

    }



/*---------------cars_card-------------------*/

.card-body .cardButton svg {

    overflow: hidden;

    vertical-align: middle;

    margin-left: 20px;

    color: var(--yellow);

}

.card-body .card-title{

    font-family: 'NouvelRBold' !important;

    color: black;

}

.card-body .prix{

    font-family: 'NouvelRBold' !important;

    color: black;

}

.cars_card-carousel-container {

    max-width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

    overflow: hidden;

}

#carousel6 .owl-stage {

    display: flex;

    justify-content: center;

}

.card{

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

    font-family:  'NouvelRBold';

}

.card .card-img-top{

    width: 100%;

}

.card .card-text{

    font-family: 'NouvelRRegular';

}

.card .cardButton {

    color: var(--black);

    font-weight: 600;

}

.card .cardButton:hover {

    color: var(--black);

    border-bottom: 2px solid var(--black);

    font-weight: 600;

}

.hybrid{

    margin-top: -64px;

}

.card .hybrid .hybrid_text{

    color: #828282;

}

.card .hybrid .hybrid_full {

    border: 2px solid #0086cf;

    color: #0086cf;

    text-align: left;

    display: inline;

    padding: 8px 15px;

    border-radius: 4px;

    font-weight: 600;

}



.cars-section1, .cars-section2 {

    display: none;

}



.cars-section1.active, .cars-section2.active {

    display: block;

}



/*---------------backToTop-------------------*/

  .backToTop{

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box; 

    text-align: center;

    align-items: center;

    font-family: RenaultGroupSemibold;

  }

  .backToTop a{

    color: black;

    font-family: RenaultGroupSemibold;

    text-decoration: underline;

  }

  .backToTop svg{

    margin: auto;

    margin-bottom: -2px;

    margin-left: 10px;

  }

  



  

  

  

  

/*-----------------------------------------------------------------------------------*/

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

/*-----------------------------------------------------------------------------------*/

@media (max-width: 1024px) {

    .carDetails {

        width: auto;

    }

    #carousel6 {

        width: 81%;

        z-index: 1;

        margin: auto;

    }

    #carousel4 .owl-item.active, #carousel4 .owl-item.cloned {

        width: auto !important;

    }

    #carousel6 .owl-nav {

        position: absolute;

        top: 44%;

        width: 100%;

        transform: translateY(-50%);

    }

    #carousel6 .owl-prev {

        font-family: 'RenaultGroupSemibold';

        left: 0px;

        position: absolute;

        font-size: 35px;

    }

    #carousel6 .owl-next {

        right: 0px;

        position: absolute;

        font-size: 35px;

        font-family: 'RenaultGroupSemibold';

    }

}


/*------------------------------------*/

/*--------------- tablet -------------*/

/*------------------------------------*/

@media (max-width: 800px) {


    .carousel-indicators li {
        height: 7px !important;
    }

    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 20px !important;
        height: 60px !important;
        background-color: black !important;
    }

    .carousel-control-next, .carousel-control-prev{
        opacity: 1 !important;
        width: 5% !important;
    }
/*--------------- equipement & option -------------*/

    .col1, .col2 {

        width: 100%;

    }

    .details {

        display: flex;

        flex-direction: column;

        gap: 0;

    }

    .equipement-options .type .btn1, .equipement-options .type .btn2, .equipement-EQIPEMENTS .type .btn1, .equipement-EQIPEMENTS .type .btn2 {

        margin-left: 0;

        font-size: 18px;

    }

    .details-EQIPEMENTS.active, .details-Options.active {

        margin-left: 44px;

    }

/*---------------carDetails---------------------*/

    .todispear {

        width: 63.8%;

    }

    .carName {

        font-size: 20px;

        margin: 0px 0 0 0;

    }

    .carDesc {

        margin: 0px 0 0 0;

        line-height: 1;

        font-size: 13px;

    }

    .Identifiant {

        margin: 0px 0 0 0;

        font-size: 13px;

    }

    .carPrice {

        font-size: 20px;

        margin: 0px 0 0 0;

    }

    .location {

        font-size: 11px;

        margin: 0px 0 0 0;

    }

    .voirPlusdiv {

        margin-bottom: 0px; 

    }

    .Appelez_btn, .interesse_btn, .financement_btn {

        height: 36px;

        font-size: 11px;

        margin: 2px 0;

    }

    .carDetails {

        padding: 0px 22px;

    }

    .voirPlusdiv .voirPlus {

        font-size: 10px;

    }

    .infoConatiner {

        margin: 0px 0;

    }



/*--------------- card cards carousel -------------*/

    .card {

        width: auto;

    }

    #carousel6 {

        width: 100%;

        margin-left: 0;

    }



/*---------------breadcrumb---------------------*/

    .breadcrumb svg {

        width: 29px;

        height: 11px;

    }

    .breadcrumb a{

        font-size: 12px;

    }

/*/------------- mainTitle ----------/*/

    .mainTitle{

      margin: 0 var(--um);

      box-sizing: border-box; 

      text-align: center;

      font-family: NouvelRBold;

    }

    .mainTitle .title {

      font-size: 29px;

      font-family: NouvelRBold;

      margin-top: 14px;

    }

    .mainTitle .reverstitle {

      font-size: 29px;

      font-family: NouvelRBold;

      margin-top: 0px;

      margin-bottom: -15px;

    }

    .mainTitle .title.exeption {

      margin-top: 0px;

    }

    .mainTitle .semititle {

        font-size: 14px;

        width: 90%;

    }



/*--------------- card cards carousel -------------*/

.card {

    width: auto;

  }

  #carousel6 {

    width: 100%;

    margin-left: 0;

  }



}

  

  

  

/*------------------------------------*/

/*--------------- phone1 -------------*/

/*------------------------------------*/

@media (max-width: 600px) {

    .breadcrumb_Container{

        display: none;

    }



/*---------------carousel---------------------*/
    .carousel-indicators li{
        margin-right: 0px !important;
    }   
    .carousel-indicators li {

        width: 10px !important;

        height: 6px !important;

    }

/*---------------cardetailsAndCarousel---------------------*/

    .cardetailsAndCarousel {

        display: flex;

        flex-direction: column;

        flex-wrap: nowrap;

    }

    .todispear {

        width: 100%;

        margin-bottom: 10px;

    }



    .carDetails {

        padding: 20px 22px;

        margin-bottom: 15px;

    }

    .info, .info2  {

        margin: 0 15px;

        font-size: 10px;

    }



    .info img, .info2 img {

        width: 21px;

        margin-bottom: 10px;

    }

    .ManuelleDiesel {

        padding: 1px 8px;

    }

/*---------------breadcrumb---------------------*/

    .breadcrumb svg {

        width: 24px;

        height: 9px;

    }

    .breadcrumb a{

        font-size: 11px;

    }

/*-----------.mainTitle .title -------------*/

    .mainTitle .title {

        font-size: 21px;

        margin-top: 20px;

    }

    .row_1i {

        margin-bottom: 0px;

        margin-top: 30px;

    }

  

/*------back to top---------*/

    .backToTop a {

      color: black;

      font-size: small;

    }



}





@media (max-width: 500px) {

/*--------------equipement-options--------------*/

.details-EQIPEMENTS-title{

    font-size: 14px;

  }

  .equipement-options {

    display: flex;

    text-align: left;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-evenly;

    gap: 0px;

  }



  .type {

    height: auto;

    width: 100%;

    box-sizing: border-box;

    display: flex;

  }

  .equipement-options .type .btn1, .equipement-options .type .btn2,

  .equipement-options .type .btn3, .equipement-options .type .btn4{

        font-size: 13px;

        margin: 0px;

  }

  .equipement-options .type .btn1.active, .equipement-options .type .btn2.active,

  .equipement-options .type .btn3.active, .equipement-options .type .btn4.active{

        border-bottom: 2px solid var(--yellow) !important;

        margin-right: 0px;

        border-left: 0px !important;

        font-size: 13px;

  }



}

  

@media (max-width: 320px) {
    .carousel-indicators li {
        height: 3px !important;
    }


    /*-----------headerTitle -------------*/

    .page_headerTitle {

      width: auto;

      margin-top: 250px;

    }

    .page_headerTitle .title .title_text {

      font-size: 22px;

      text-align: left;

    }

    .page_headerTitle .title .subtitle_text {

      font-size: 12px;

      text-align: left;

      width: 279px;

    }

}