@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bookmania:wght@400;500;600;700;800&display=swap');

:root {
    --r-bleu: #007bff;
    --r-bleu: ;
}

@font-face {
    font-family: "Nunito-Bold";
    src: url("../fonts/Nunito-Bold.ttf");
    display: swap;
}

@font-face {
    font-family: "Nunito-Light";
    src: url("../fonts/Nunito-Light.ttf");
    display: swap;
}
@font-face {
    font-family: "Nunito-Regular";
    src: url("../fonts/Nunito-Regular.ttf");
    display: swap;
}
@font-face {
    font-family: "Nunito-SemiBold";
    src: url("../fonts/Nunito-SemiBold.ttf");
    display: swap;
}
@font-face {
    font-family: "Nunito-SemiBold";
    src: url("../fonts/Nunito-BoldItalic.ttf");
    display: swap;
}

body {
    font-family: "Inter"/*, "Bookmania", "Nunito-Regular"*/, sans-serif;
    font-size: 18px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-weight: 400;
    font-style: normal;
}

.font-regular {
    font-family: "Nunito-Regular";
}

.font-medium {
    font-family: "Nunito-Medium";
}

.font-light {
    font-family: "Nunito-Light";
}

.font-bold {
    font-family: "Nunito-Bold";
}

.font-semibold {
    font-family: "Nunito-SemiBold";
}

.bbcar-color {
    color: #8340E5;
}
.bbcar-color-dark {
    color: #09092A;
}

.bg-bbcar-color {
    background-color: #8340E5;
}
.bg-bbcar-black{
    background-color: #09092A;
}
.bbcar-blue {
    color: #ad6dff;
}
.bg-bbcar-blue {
    background: #ad6dff;
}
.bg-bbcar-yellow {
    background-color: #ffa895;
}
.bbcar-base-color {
    color: #ffa895;
}
.bbcar-border-radius {
    border-radius: 2px;
}
.btn-abonne {
    background: #b1aaff;
    border-radius: 1.54226px;
}

.btn-primary-refonte{
    padding: 11px 26px;
    background: #8340E5;
    border-radius: 5px;
    color: white !important;
    border-color: #8340E5;
    font-size: 14px;
}

.btn-outline-primary-refonte{
    width: 148px;
    padding: 11px 26px;
    border-radius: 5px;
    color: #8340E5 !important;
    border-color: #8340E5;
    font-size: 14px;
}

.text-gris {

}
/*.btn-choose {
    padding: 5.55388px 11.1078px;
    gap: 8.33px;

    width: 69.22px;
    height: 28.11px;

    background: #b1aaff;
    border-radius: 1.38847px;
}*/

.nav-item .nav-link{
    color: black;
    font-weight: 500;
}

.nav-item .nav-link.active{
    color: #8340E5;
}

/* Header style code start*/

/* Mobile navbar */
.offcanvas-body > ul {
    list-style-type: none;
}
.offcanvas-body > ul li {
    display: flex;

    align-items: center;
    width: 100%;
    padding-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 500;
    border-bottom: 0.5px solid #bbbbbb;
}

.offcanvas-body > ul li:hover {
    background-color: white;
    color: #9c6dff;
}

.offcanvas-body > ul > li a {
    width: 100%;
    font-weight: 500;
    height: 100%;
    color: #fff;
}

.mobile-toggle {
    border: 2px solid #fff;
}

.mobile-toggle,
.mobile-nav-square {
    display: none;
    background: transparent !important;
}
.btn-x {
    background: transparent !important;
}
.offcanvas {
    display: none;
}

/*End Mobile navbar */

.nav-content {
    width: 90%;
}
.navbar-nav > div:first-child {
    margin-left: 15%;
    width: 52%;
}

.navbar-nav li a {
    font-size: 14px;
    font-weight: 500;
}

.navbar-nav li.button1 {
    margin-left: 15%;
}

.navbar-nav li.button2 {
    margin-left: 20px;
}

/*.navbar-brand > p:first-child {
    position: absolute;
    width: 30px;
    height: 30px;
    left: -25px;
    top: 5px;
    border-radius: 50%;
    background: #ffffff;
}
.navbar-brand > p:last-child {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0px;
    top: 5px;
    border-radius: 50%;
    background: #c8ccff;
}*/
.logo-bbCar {
    /*padding-left: 32px;*/
}

/* Responsive header style code */

@media screen and (min-width: 1920px) {
    .navbar-nav {
        padding-left: 150px;
    }

    .navbar-nav li a {
        font-size: 18px;
    }

    .navbar-nav li.button1 {
        margin-left: 23%;
    }
}

@media screen and (max-width: 1460px) {
    .navbar-nav > div:first-child {
        margin-left: 10%;
        width: 60%;
        /* border: 1px solid black; */
    }
}

@media screen and (max-width: 1317px) {
    .navbar-nav > div:first-child {
        margin-left: 0%;
        width: 70%;
        /* border: 1px solid black; */
    }
}

@media screen and (max-width: 1280px) {
    .nav-content {
        width: 90%;
    }

    .navbar-nav li.button1 {
        margin-left: 6%;
    }

    .navbar-nav li.button2 {
        margin-left: 20px;
    }
}

@media screen and (max-width: 1190px) {
    .navbar-nav li a {
        font-size: 15px;
    }
}
@media screen and (max-width: 1136px) {
    #btn-essai {
        width: 148px;
    }
}

@media screen and (max-width: 1102px) {
    .navbar-nav > div:first-child {
        margin-left: 0%;
        width: 70%;
    }

    #nav-content {
        width: 98%;
        margin-left: 20px;
    }
    .navbar-nav li a {
        font-size: 15px;
        font-weight: 500;
    }
}
@media screen and (max-width: 1003px) {
    .navbar-nav li a {
        font-size: 14px;
    }
}

@media screen and (max-width: 992px) {
    /*.navbar-brand > p:first-child {
        width: 25px;
        height: 25px;
        left: -25px;
        top: 6px;
        border-radius: 50%;
        background: #ffffff;
    }*/
    .mobile-toggle {
        margin-right: 50px;
        border: 1px solid white;
    }
    /*.navbar-brand > p:last-child {
        width: 25px;
        height: 25px;
        left: -12px;
        top: 6px;
        border-radius: 50%;
        background: #c8ccff;
    }*/
}

@media screen and (max-width: 990px) {
    .offcanvas,
    .mobile-toggle {
        display: block;
    }
    .mobile-toggle {
        position: absolute;
        right: 0;
    }
}

/* First section style code */

.section-start{
    /*border-radius: 10px 10px 181px 10px;
    width: 100%;*/
    height: 600px;
    /*background: #8340E5;*/
    background: #EAEAFA;
}
.carousel-item > img {
    height: 325px;
    width: 399px;
}
.main-carousel-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 325px;
    width: 399px;
}

.section-start-text-content {
    line-height: 85px;
    margin-top: 10px;
}


.h2-logiciel-gestionc{
    font-family: "Inter";
    font-style: normal;
    font-size: 35px;
    line-height: 132.9%;
}

.h2-logiciel-gestionc span{
    color: #8340E5;
}

.h2-fonctionalite-texte {
    font-family: "Inter" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 132.9%;
}

.p-under-logiciel {
    position: absolute;
    width: 175px;
    height: 5px;
    left: 349px;
    top: 225px;
    border: 2px solid #ffe5a3;
    transform: rotate(-180deg);
}
.text-vue-globale {
    /*border-left: 6px solid #9c6dff;*/
    font-weight: 400;
    color: black;
    font-size: 18px;
    width: 431px;
    line-height: 30px;
    margin-top: 20px;
}

.section-start-content {
    display: flex;
    justify-content: center;
    align-items: center;
    /*width: 75%;*/
    padding-left: 100px;
    padding-right: 100px;
}

.section-start-text-content > p {
    line-height: 30px;
}
.btn-start {
    /*width: 145px;
    height: 46px;*/
    background: #09092A;
    border-radius: 5px;
    padding: 11px 26px;
}

.btn-outline-start {
    background: transparent;
    border-radius: 5px;
    padding: 11px 26px;
    border-color: white;
    color: white;
    font-size: 14px;
}

.btn-outline-start:hover {
    color: white;
}

.btn-essai {
    padding: 6px 16px;
    gap: 10px;
    border-radius: 10px;
    font-size: 18px;
    height: 35px;
    border: 2px solid #9c6dff;
}

.shape{
    position: absolute;
    width: 100%;
    height: 151.44px;
    /*left: -70px;*/
    top: 660px;
    background-image: url("../images/1700.svg");
}

.marks-pane{
    position: absolute;
    width: 1280px;
    height: 136px;
    left: 115px;
    top: 642px;
    padding: 23px 0px !important;

    background: #FFFFFF;
    box-shadow: 0px 117px 47px rgba(34, 24, 50, 0.01), 0px 66px 39px rgba(34, 24, 50, 0.03), 0px 29px 29px rgba(34, 24, 50, 0.04), 0px 7px 16px rgba(34, 24, 50, 0.05), 0px 0px 0px rgba(34, 24, 50, 0.05);
    border-radius: 20px;
}

.marks-pane div.w-100{
    margin-left: 90px;
}

.marks-icon{
    position: absolute;
    margin-top: 5px;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background: #8340E5;
}

.marks-note{
    margin-left: 40px;
    margin-top: 5px;
}

.marks-note  p{
    font-size: 12px;
    line-height: 30px;
    color: #09092A;
}

.marks-note  p strong{
    font-weight: 800;
    font-size: 26px;
    line-height: 20px;
    color: #09092A;
}

.marks-percent{
    font-size: 12px;
    line-height: 18px;
    color: #8340E5;
}

@media screen and (max-width: 1280px){
    .marks-pane{
        width: 1107px;
        left: 75px;
        top: 630px;
    }
}

.p-possibilite{
    margin-top: 100px;
    font-weight: 500;
    font-size: 14px;
}

.section-offre .p-possibilite{
    margin-top: 54px;
}

.testimonie .p-possibilite{
    margin-top: 68px;
}

@media screen and (max-width: 1320px) {
    .text-vue-globale {
        font-size: 22px;
        width: 100%;
        margin-top: 10px;
    }
}

@media screen and (max-width: 1280px) {
    .section-start-content {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media screen and (max-width: 1332px)  and (min-width: 1281px) {
    .section-start-content {
        padding-left: 50px;
        padding-right: 50px;
    }
    .carousel-item > img {
        height: 260px;
        width: 300.02px;
    }
    .main-carousel-content {
        height: 260px;
        width: 300.02px;
    }
}

@media screen and (max-width: 992px) {
    .carousel-item > img {
        height: 208px;
        width: 256.02px;
    }

    .main-carousel-content {
        height: 208px;
        width: 256.02px;
        margin-left: 20px;
    }

    .text-vue-globale {
        font-size: 14px;
        width: 100%;
        margin-top: 10px;
    }
    .section-start-content {
        width: 80%;
        justify-content: space-around;
        align-items: center;
    }
    #btn-start {
        font-size: 12px;
    }
    .btn-essai {
        font-size: 12px;
    }
}

.contact-section{
    background-color: #EAEAFA;
    padding-left: 100px;
    padding-right: 100px;
}

.contact-section .p-possibilite{
    padding-top: 66px;
    margin-top: 0px;
}

.contact-section-content > div:last-child {
    /*padding-left: 20px;*/
}

.section-fonctionnalite{
    padding-left: 100px;
    padding-right: 100px;
}

.section-fonctionnalite div.row{
    margin-top: 80px;
}

.accordion-item{
    border: none;
    background-color: transparent;
}

.accordion-button{
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    color: #AC9DCC;
}

.accordion-button::after{
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke'#AC9DCC' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/
    /*background-color: #AC9DCC;*/
}

.accordion-button:not(.collapsed){
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    color: #09092A;
    background-color: inherit;
    box-shadow: none;
}

.accordion-button:focus {
    z-index: 0;
    border-color: inherit;
    box-shadow: none;
}

.accordion-body{
    padding-top: 0rem;
}

.accordion-body strong{
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    color: #09092A;
}

.accordion-body ul{
    list-style: none;
    padding-left: 1.5rem;
    font-size: 14px;
}

.accordion-body ul li{
    padding-top: 1rem;
}

.accordion-body ul li:before {
    content: '';
    position: absolute;
    width: 7.37px;
    height: 7.37px;
    background-color: #8340E5;
    border-radius: 50%;
    margin-top: 6px;
    margin-left: -22px;
}

/* Responsive first section */
@media screen and (max-width: 1050px) {
    .section-start > div {
        border-radius: 10px 10px 181px 10px;
        width: 90%;
        height: 450px;
        background: #fdfbff;
    }
    #section-fonctionnalite-content {
        width: 80%;
    }
}

/* Fonctionnalite section */

.section-fonctionnalite-content,
.section-fonctionnalite-content-reverse {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-fonctionnalite-content > div {
    margin-top: 20px;
}

.section-fonctionnalite-content > div:first-child > img,
.section-fonctionnalite-content-reverse > div:last-child > img {
    height: 280px;
}
.section-fonctionnalite-content-reverse > div:first-child {
    margin-right: 100px;
}
.section-fonctionnalite-content-third-child > div:first-child {
    margin-right: 40px;
}
.section-fonctionnalite-content-third-child > div:first-child > img {
    margin-right: 50px;
}
.first-section-fonctionnalite > div:first-child {
    margin-right: 50px;
}
.first-section-fonctionnalite > div:last-child {
    margin-left: 50px;
}

@media screen and (max-width: 992px) {
    .h2-logiciel-gestion {
        font-family: "Nunito";
        font-style: normal;
        font-weight: 700;
        font-size: 16.6833px;
    }
    .p-recommandation {
        font-family: "Nunito";
        font-style: normal;
        font-weight: 400;
        font-size: 12.691px;
        line-height: 15px;
        text-align: center;
    }
    .h2-fonctionalite-texte {
        font-family: "Inter" !important;
        font-style: normal;
        font-weight: 700;
        font-size: 55px;
        line-height: 132.9%;
    }
    .p-testimonie {
        font-size: 13px;
    }
    .p-possibilite {
        font-size: 13px;
    }
    .section-text-content {
        font-size: 12px;
    }
    .navbar-nav li a {
        font-size: 12px;
    }
    .logo {
        font-size: 15px;
    }
    .h4-gestion-user {
        font-size: 16px;
        font-weight: 700;
    }
    #nav-content {
        width: 90%;
        margin-left: 20px;
    }
}

@media screen and (max-width: 990px) {
    .section-start-content {
        width: 90%;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
        padding-right: 0px;
    }
    .section-start-content > div:first-child {
        margin-top: 100px;
        width: 81%;
    }
    .main-carousel-content {
        height: 275px;
        width: 399px;
    }
    .main-carousel-content {
        height: 80%;
        width: 399px;
    }
    .carousel-item > img {
        height: 275px;
        width: 80%;
    }

    .offre-div-section {
        display: flex;
        justify-content: space-between;
    }

    .offre-div-section-content {
        border-radius: 2px;
        background: #e6dbff;
        border: 0.694235px solid rgba(239, 239, 239, 0.5);
    }
    .section-fonctionnalite-content-reverse {
        display: flex;
        justify-content: space-between;
    }

    .section-fonctionnalite-content > div:first-child > img,
    .section-fonctionnalite-content-reverse > div:last-child > img {
        height: 230px;
        margin-left: 10px;
    }
    .section-fonctionnalite-content-reverse > div:first-child {
        margin-right: 20px;
    }

    .section-fonctionnalite-content-reverse > div:first-child {
        margin-right: 0px;
    }
}

@media screen and (max-width: 880px) {
    .main-carousel-content {
        height: 250px;
        width: 399px;
    }
    .carousel-item > img {
        height: 250px;
        width: 80%;
        margin-left: 25px;
    }
}

@media screen and (max-width: 768px) {
    .section-start-content {
        margin-top: -100px;
        flex-direction: column-reverse;
        width: 100%;
        justify-content: space-between;
        padding-top: 20px;
        height: 100% !important;
        padding-left: 0px;
        padding-right: 0px;
    }

    .section-start-content > div:first-child {
        margin-top: 20px;
        width: 100%;
    }
    .carousel-first-section {
        height: 280px;
        width: 100%;
    }
    .carousel-item > img {
        height: 280px;
        width: 100%;
        margin-left: 0px;
    }
    .main-carousel-content {
        height: 80%;
        width: 100%;
        margin-left: 0;
    }
    #section-fonctionnalite-content {
        width: 100%;
    }
    .section-fonctionnalite-content > div:first-child > img,
    .section-fonctionnalite-content-reverse > div:last-child > img {
        height: 250px;
        margin-left: 10px;
        width: 100%;
    }
    .first-section-fonctionnalite > div:first-child {
        margin-right: 0px;
    }
    .first-section-fonctionnalite > div:last-child {
        margin-left: 0px;
    }

    .section-fonctionnalite-content {
        flex-direction: column-reverse;
        justify-content: center;
    }
    .section-fonctionnalite-content-reverse {
        flex-direction: column;
    }
    .section-fonctionnalite-content-reverse > div:first-child,
    .section-fonctionnalite-content > div:last-child,
    .section-fonctionnalite-content > div:first-child {
        width: 90%;
    }
    .section-fonctionnalite-content-third-child > div:first-child {
        margin-right: 0px;
    }
    .section-fonctionnalite-content-third-child > div:first-child > img {
        margin-right: 0;
    }
    .section-fonctionnalite-content > div {
        margin-top: 0px;
    }

    .p-recommandation {
        width: 90%;
    }
    .section-offre > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .p-start-free {
        width: 85%;
    }
}

/* Section fontionnalite */
.h2-fonctionnalite {
    /*border-bottom: 3px solid #ffa895;
    color: #9c6dff;
    text-transform: uppercase;
    font-size: 32px;*/
}
.section-text-content {
    /* background: #e6dbff; */
    border-radius: 8.48039px;
}

/* Section offre */
.h2-offre-texte{
    font-family: 'Inter';
    font-weight: 700;
    font-size: 35px;
    margin-top: 24px;
}

.p-start-free{
    font-size: 18px;
}

.section-join .p-start-free{
    color: black;
}

.section-join .p-start-free span{
    font-weight: 600;
    color: #8340E5;
}

.basique-color {
    color: #ffc38a;
}
.standard-color {
    color: #36c781;
}
.premium-color {
    color: #f4bcde;
}

.section-offre {
    margin-top: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #EAEAFA;
}

.section-offre .nav-tabs{
    width: 1277px;
    border-bottom: none;
    font-size: 14px;
}

.section-offre .nav-tabs .nav-link{
    color: white;
    border-bottom: 6px solid #E3E4FF;
}

.section-offre .nav-tabs .nav-link.active{
    color: #8340E5;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 6px solid #8340E5;
}

.range-slider {
    position: relative;
    width: 661px;
    margin: 78px 0px 48px;
    /*height: 20vmin;*/
}

.range-slider_input {
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    opacity: 0;
    margin: 0;
}

.range-slider_input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 100px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
}

.range-slider_input::-moz-range-thumb {
    width: 14vmin;
    height: 14vmin;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
}

.range-slider_thumb {
    width: 28px;
    height: 28px;
    /*border: 0.6vmin solid #303030;*/
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #8340E5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    z-index: 2;
}

.range-slider_line {
    height: 8px;
    width: 100%;
    background-color: #E3E4FF;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    position: absolute;
    z-index: 1;
    border-radius: 10px;
}

.range-slider_line-fill {
    position: absolute;
    height: 8px;
    width: 0;
    background-color: #8340E5;
    border-radius: 10px 0px 0px 10px;
}

/* Toggle Section */
.toggle-section {
    display: inline-flex;
    flex-direction: row;
    gap: 1.9rem;
    margin: 0 auto;
    margin-top: 2.6rem;
    align-items: center;
  }

  .toggle-area {
    position: relative;
    display: inline-flex;
    align-items: center;
    top: -5px;
    cursor: pointer;
    width: 52.8px;
    height: 24px;
    border-radius: 20px;
    border: solid 1px black;
    background: #CDC9FF;
  }

  .toggle-btn {
    cursor: pointer;
    position: relative;
    width: 1.3rem;
    height: 1.3rem;
    margin: 5%;
    border-radius: 50%;
    background-color: #8340E5;
  }

  .toggle-area.monthly {
    justify-content: flex-start;
    align-content: flex-start;
  }

  .toggle-area.anually {
    justify-content: flex-end;
    align-content: flex-end;
  }

  .toggle-section p {
    color: #09092A;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 147.4%; /* 26.532px */
    letter-spacing: 0.258px;
  }

  .toggle-section p.selected {
    color: #8340E5;
}

.text-designation{
    font-weight: 600;
    /*background-image: url("../images/Group 4209.svg");
    background-repeat: no-repeat;*/
}

.text-designation img{
    position: absolute;
    top: 6.5%;
    left: 25%;
    z-index: 1;
}

.offre-div-section-content {
    width: auto;
}

.offre-div-section-content:nth-child(1) {
    border-radius: 10px 0px 0px 10px;
}

.offre-div-section-content:nth-child(1) {
    border-radius: 0px 10px 10px 0px;
}

.offre-div-section-content h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
}

.offre-div-section-content h3 span {
    font-size: 18px;
    color: var(--gris-froid-1, #616182);
}

.offre-div-section-content span {
    color: #8340E5;
}

.offre-div-section-content.recommande {
    border-radius: 10px;
    background: var(--Violet-noir, #09092A);
    color: white;
}

.offre-div-section-content.recommande span {
    color: white;
}

.offre-div-section-content.recommande h3 span {
    color: white;
}

.section-offre .p-start-free span {
    font-weight: 600;
    color: #8340E5;
}

.offre-div-section-content .btn-primary-refonte{
    width: 100%;
}

.offre-div-section-content .btn-outline-primary-refonte{
    width: 100%;
}

.offre-div-section-second-content p::before {
    content: url("../images/ic_baseline-check.svg");
    margin-right: 16px;
    margin-top: 16px;
}

.offre-div-section-second-content p span{
    font-style: normal;
    font-weight: 700;
}

/*.offre-div-section-content > div:first-child {
    background: #fff;
    border-radius: 2;
}*/
.div-ofrre-mesuelle > button:first-child {
    border-radius: 25px;
}
.div-offre-mesuelle {
    background-color: #e9e9e9;
}
.div-ou {
    display: flex;
    justify-content: center;
    align-items: center;
}
.div-ou > p:first-child,
.div-ou > p:last-child {
    height: 1.5px;
    width: 220px;
    border: 0.547917px solid #000000;
}

.btn-choose {
    width: 88px;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #b1aaff;
    border-radius: 2px;
}

.offre-div-section {
    display: flex;
    /*justify-content: space-between;*/
    width: 70%;
    background: white;
    border-radius: 10px;
}

.temoignage-text {
    width: 50%;
}
.btn-essaie-gratuit {
    background: #fdfbff;

    /* BBcar */
    border: 1px solid #9c6dff;
    border-radius: 2px;
    color: #9c6dff;
}

.section-join-content{
    color: white;
    margin: 68px 0;
    padding: 0 100px;
}

.section-faq-content{
    color: white;
    margin: 68px 0;
    padding: 0 100px;
}

.section-join-content div.bg-bbcar-black{
    border-radius: 20px;
    padding: 47px;
}

.section-faq-content div.bg-bbcar-black{
    border-radius: 20px;
    padding: 47px;
}

.section-faq-content div.bg-bbcar-black .faq{
    padding-top: 53px;
    padding-bottom: 53px;
    padding-right: 65.38px;
}

.section-join-content span{
    color: #8340E5;
}

.section-join-content .btn-primary-refonte{
    margin-left: 15px;
}

@media screen and (max-width: 992px) {
    .div-offre-mesuelle a {
        font-size: 12px;
    }
    .offre-div-section-second-content > div p {
        font-size: 12px;
    }
    .offre-div-section-content > div:first-child p {
        font-size: 12px;
    }
    .offre-div-section-content > div:first-child h3 {
        font-size: 14px;
        font-weight: 700;
    }

    .btn-choose {
        font-size: 14px;
        gap: 5.86px;
        background: #9c6dff;
        border-radius: 3.51859px;
    }

    .btn-essaie-gratuit {
        font-size: 14px;
    }

    .offre-div-section-content {
        width: 32% !important;
    }
    .p-start-free {
        font-size: 14px;
    }

    .temoignage-text {
        width: 60%;
        margin-top: 5px;
        font-size: 16px;
    }
    .logo-bbCar {
        /*padding-left: 15px;
        margin-left: 25px;*/
    }
    .h2-fonctionnalite {
        font-size: 18px;
    }
}

@media screen and (max-width: 1050px) {
    .offre-div-section {
        width: 90%;
    }
    .offre-div-section-content {
        width: 33%;
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .offre-div-section {
        flex-direction: column;
    }
    .offre-div-section-content {
        width: 100% !important;
        margin-top: 20px;
    }
    .temoignage-text {
        width: 80%;
        margin-top: 5px;
        font-size: 16px;
    }
    .mobile-toggle {
        margin-right: 20px;
        border: 1px solid white;
    }
}

@media screen and (max-width: 320px) {
    .p-start-free {
        font-size: 14px;
        width: 68%;
    }
}

/* Testimony style code */

.testimonie {
    /*background: rgba(253, 251, 255, 0.92);*/
}
.p-testimonie {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 33px;
    color: #000000;
}

.carousel-first-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.carousel-first-item > img {
    width: 139px;
    height: 139px;
}
.p-icon-star {
    letter-spacing: 12px;
}
.green-mark {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 10vw;
    top: 111px;
    border-radius: 50%;
    background: #4ae274;
}
.blue-mark {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 26.93vw;
    top: 189px;
    background: #4f80ff;
    box-shadow: 0px 1px 5px 5px rgba(12, 240, 255, 0.12);
    border-radius: 50%;
}
.red-mark {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 67.28vw;
    top: 133px;
    background: #fa16ba;
    border-radius: 50%;
    box-shadow: 0px 1px 5px 5px rgba(255, 164, 12, 0.12);
}
.marron-mark {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 55.85vw;
    top: 285px;
    border-radius: 50%;
    background: #e970e4;
    box-shadow: 0px 1px 5px 5px rgba(12, 197, 255, 0.12);
}
.cyan-mark {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 18.96vw;
    top: -50px;
    border-radius: 50%;
    background: #68e7df;
}

.orange-mark {
    position: absolute;
    width: 13px;
    height: 13px;
    right: 18.96vw;
    top: 50px;
    border-radius: 50%;
    background: #fb8888;
    box-shadow: 0px 1px 10px rgba(235, 145, 145, 0.2);
}
.img2 {
    position: absolute;
    width: 52px;
    height: 52px;
    left: 15vw;
    top: 40px;
}
.img1 {
    position: absolute;
    width: 52px;
    height: 52px;
    left: 60vw;
    top: 95px;
}

.quote-svgrepo-com-1{
    position: absolute;
    width: 24px;
    height: 24px;
    left: 250px;
    top: 253px;
}

.quote-svgrepo-com-2{
    position: absolute;
    width: 24px;
    height: 24px;
    left: 1000px;
    top: 400px;
}

/* Contact section style code */
.contact-section form input {
    height: 48px;
}
.contact-section form input,
.contact-section form textarea {
    width: 100%;
    /*background: transparent;*/
    border: 1px solid black;
    border-radius: 5px;
    padding-left: 32px;
    padding-right: 32px;
    margin-bottom: 16px;
    font-size: 14px;
}
.contact-section form textarea {
    height: 130px;
    padding-top: 16px;
}

.contact-section-content {
    /*display: flex;
    justify-content: space-between;
    width: 75%;*/
}

.form-content > form {
    padding-left: 47px;
    width: 100%;
}

.demo-content {
    border-bottom: 2px solid silver;
}

.faq-summary{
    margin: 31px 0;
    font-size: 18px;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: 147.4%;
    letter-spacing: 0.258px;
}

.h4-help {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: normal;
    color: #8340E5;
}
.h4-aide-liste {
    font-size: 18px;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    line-height: 147.4%;
    letter-spacing: 0.258px;
}

/* Footer style code */

.section-footer {
    /*background: #9c6dff;*/
    padding-left: 100px;
    padding-right: 100px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 18px;
}
.section-footer form input {
    width: 250px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 12px 19px !important;
    color: #91889A;


    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
}

.section-footer h4{
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 147.4%;
    letter-spacing: 0.258px;
    color: #8340E5;
}

.section-footer .list-unstyled li{
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
}

.last-footer-div p {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
}

.last-footer-div a {
    color: #09092A;
}

.div-info-plus {
    height: 200px;
    width: 200px;
    background: #ffa895;
    color: #ffa895;
    bottom: -10px;
    left: -10px;
    border-bottom-left-radius: 10px;
}
.last-footer-div {
    border-top: 1px solid rgba(0, 0, 0, 0.20);
}
.ul-info {
    line-height: 35px;
}

.media-link {
    color: #09092A;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
    /*display: flex;
    width: 300px;
    justify-content: space-between;*/
}
.media-link svg{
    margin-top: 18px;
}
.media-link svg:nth-child(3){
    margin-left: 20px;
    margin-right: 20px;
}
.plateforme-section {
    padding-left: 20px;
}
.info-section {
    padding-left: 15px;
}
.contact-section-content > div {
    /*width: 50%;*/
}
.p-abonnement {
    width: 95%;
    /*font-family: "Nunito";*/
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.25px;
}

@media screen and (max-width: 1060px) {
    .contact-section-content {
        width: 85%;
    }
}
@media screen and (max-width: 992px) {
    .h4-aide-liste {
        font-size: 15.5628px;
    }
    .h4-help {
        font-size: 18px;
    }
    .contact-text-content {
        font-size: 14px;
    }
    .btn-submit-contact {
        padding: 2px;
        font-size: 18px;
    }
}
@media screen and (max-width: 414px) {
    .section-start > div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #section-fonctionnalite-content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .section-start > div > div,
    .main-carousel-content {
        width: 100%;
    }
    .carousel-item > img {
        height: 325px;
        width: 399px;
    }
    .main-carousel-content {
        height: 325px;
        width: 399px;
    }
    .temoignage-text {
        width: 100%;
        margin-top: 5px;
        font-size: 16px;
    }

    .img2 {
        position: absolute;
        width: 42px;
        height: 42px;
        left: 0vw;
        top: 10px;
    }
    .img1 {
        position: absolute;
        width: 42px;
        height: 42px;
        left: 65vw;
        top: 80px;
    }

    .marron-mark {
        position: absolute;
        width: 13px;
        height: 13px;
        left: 55.85vw;
        top: 235px;
        border-radius: 50%;
        background: #e970e4;
        box-shadow: 0px 1px 5px 5px rgba(12, 197, 255, 0.12);
    }
    .cyan-mark {
        position: absolute;
        width: 13px;
        height: 13px;
        left: 18.96vw;
        top: -10px;
        border-radius: 50%;
        background: #68e7df;
    }

    .orange-mark {
        position: absolute;
        width: 13px;
        height: 13px;
        right: 0.96vw;
        top: 30px;
        border-radius: 50%;
        background: #fb8888;
        box-shadow: 0px 1px 10px rgba(235, 145, 145, 0.2);
    }

    .info-section {
        padding-left: 0px;
    }
    /*.navbar-brand > p:first-child {
        width: 25px;
        height: 25px;
        left: -40px;
        top: 7px;
        border-radius: 50%;
        background: #ffffff;
    }

    .navbar-brand > p:last-child {
        width: 25px;
        height: 25px;
        left: -25px;
        top: 7px;
        border-radius: 50%;
        background: #c8ccff;
    }*/
    .logo-bbCar {
        /*padding-left: 5px;
        margin-right: 100px;
        border: 1px solid white;*/
    }
    .h2-fonctionnalite {
        font-size: 13px;
    }
    .p-start-free {
        width: 70%;
    }
    .div-ou > p:first-child,
    .div-ou > p:last-child {
        height: 1.5px;
        width: 100px;
        border: 0.547917px solid #000000;
    }
    .main-carousel-content {
        display: none;
    }
    .temoignage-text {
        font-size: 14px;
    }
    .div-offre-mesuelle {
        font-size: 14px;
    }
}

@media screen and (max-width: 992px) {
    .section-footer {
        font-size: 16px;
    }
    .logo {
        margin-left: 5px;
    }
    .last-footer-div p {
        font-size: 16px;
    }
    .p-abonnement {
        font-size: 16px;
        width: 97%;
    }
}

#mobile-plateforme, #mobile-faq, .logo-mobile{
    display: none;
}

@media screen and (max-width: 768px) {
    .contact-section-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .contact-section-content > div {
        width: 95%;
    }

    .div-info-plus {
        height: 200px;
        width: 200px;
        background: #ffa895;
        color: #ffa895;
        bottom: -6px;
        left: -6px;
        border-bottom-left-radius: 10px;
    }

    .form-content > form {
        background: #fbfaff;
        padding: 10px;
        border-radius: 10px;
        width: 93%;
    }
    .contact-section form input {
        height: 50px;
    }

    .p-recommandation {
        line-height: 20px;
    }
    .p-abonnement {
        width: 95%;
        font-family: "Nunito";
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 25px;
    }
    .last-footer-div{
        display: flex;
        justify-content: center;
    }
    .last-footer-div p {
        font-size: 12px;
        width: 95%;
    }
    #web-footer{
        display: flex;
        flex-direction: column-reverse;
    }
    .logo-web{
        display: none;
    }
    #mobile-plateforme, #mobile-faq{
        display: block;
    }
    #web-plateforme, #web-faq{
        display: none;
    }
    .logo-mobile {
        margin-left: 16px;
        display: block;
    }
    .logo-mobile .p3{
        margin-left: 35px;
        font-weight: bold;
    }
    .logo-mobile .p1, .logo-mobile .p2{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .logo-mobile .p1{
        background-color: #C8CCFF;
        color: #C8CCFF;

    }
    .logo-mobile .p2{
        color: white;
        background-color: white;
        left: 22px;
    }

}

@media screen and (min-width: 1920px) {
    body {
        font-size: 22px;
    }

    .btn-primary-refonte,
    .btn-outline-primary-refonte,
    .btn-outline-start{
        font-size: 18px;
    }

    .section-start {
        height: 850px;
    }

    .section-start-text-content {
        margin-top: -60px;
    }

    .h2-logiciel-gestionc {
        font-size: 55px;
    }

    .text-vue-globale {
        font-size: 22px;
    }

    .shape{
        top: 920px;
    }

    .marks-pane {
        width: 1709px;
        left: 91px;
        top: 900px;
    }

    .marks-icon {
        width: 34px;
        height: 34px;
    }

    .marks-note {
        margin-left: 50px;
    }

    .marks-note p {
        font-size: 16px;
    }

    .marks-note p strong {
        font-size: 36px;
    }

    .marks-percent {
        font-size: 16px;
    }

    .p-possibilite {
        font-size: 18px;
    }

    .h2-fonctionalite-texte {
        font-size: 60px;
    }

    .accordion-button {
        font-size: 24px;
    }

    .accordion-button:not(.collapsed){
        font-size: 24px;
    }

    .accordion-body strong {
        font-size: 21px;
    }

    .accordion-body ul {
        font-size: 18px;
    }

    #bloc-images{
        padding-left: 150px;
    }

    .h2-offre-texte {
        font-size: 55px;
    }

    .p-start-free {
        font-size: 22px;
    }

    .section-offre .nav-tabs {
        width: 1700px;
        font-size: 18px;
    }

    .range-slider {
        width: 890px;
    }

    .offre-div-section-content {
        width: 415px;
    }

    .text-designation img {
        left: 29%;
    }

    .offre-div-section-content h3 {
        font-size: 36px;
    }

    .offre-div-section-content h3 span {
        font-size: 22px;
    }

    .section-join .btn-outline-primary-refonte {
        width: 168px;
    }

    .section-join-content img{
        width: 90%;
    }

    .section-join-content .texte {
        padding-top: 70px;
    }

    .contact-section form input,
    .contact-section form textarea {
        font-size: 18px;
    }

    .section-footer{
        align-items: normal !important;
        font-size: 18px;
    }

    .p-abonnement,
    .section-footer .list-unstyled li,
    .media-link,
    .last-footer-div p {
        font-size: 18px;
    }

    .section-footer h4 {
        font-size: 22px;
    }

    .section-footer form input {
        width: 335px;
        font-size: 16px;
    }

    .section-footer .btn-primary-refonte {
        margin-left: 20px;
    }

    .div-abonnement {
        justify-content: flex-start !important;
    }

    .quote-svgrepo-com-1 {
        left: 315px;
        top: 285px;
    }

    .quote-svgrepo-com-2 {
        left: 1090px;
        top: 385px;
    }
}

@media screen and (max-width: 1280px) {
    .section-fonctionnalite {
        padding-left: 80px;
        padding-right: 80px;
    }

    .section-offre .nav-tabs{
        width: 1100px;
        border-bottom: none;
        font-size: 14px;
    }

    .range-slider {
        width: 592px;
    }

    .offre-div-section {
        width: 87%;
    }

    .section-join-content {
        padding: 0 80px;
    }

    .contact-section {
        padding-left: 80px;
        padding-right: 80px;
    }

    .section-faq-content {
        padding: 0 80px;
    }

    .section-footer {
        padding-left: 80px;
        padding-right: 80px;
    }

    .quote-svgrepo-com-1 {
        left: 200px;
        top: 270px;
    }

    .quote-svgrepo-com-2 {
        left: 735px;
        top: 385px;
    }
}
/* .img-underline{
    top:80px;
    width:155px;
}
@media screen and (max-width:917px) {
    .img-underline{
        top:60px;
        width:155px;
    }
} */