/*
============================================
FONTS
============================================
*/


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&display=swap');

body{
    font-family: 'Open Sans', sans-serif;
    line-height: 1.98rem;
}
.ce_text.format-p-large p {
    font-size: 19px;
  }

.header .mainmenu ul li a.highlight-square-color-accent span{
    border-radius: 5px;
    padding-left: 2rem!important;
    padding-right: 2rem!important;
}


.ce_hyperlink a.link-white, a.btn.link-white{
    color: #2A3F54!important;
    
}
.header .inside {
    max-width: 1400px;

}
.header.cloned .inside {
    max-width: 1240px;

}

.mainmenu ul li a {
    font-weight: 600;
  }
  mainmenu ul li a {
    font-size: 16px;
  }


/*
============================================
Hero
============================================
*/
.subtitle-hero-top.txt-color-white{
    font-weight: 400;
}



.button-hero-call.ce_hyperlink a.link-white{
    font-weight: 600;
}

/*
============================================
simple à prendre en main
============================================
*/

.subtitle-section-simple{
    color: #74ABE1!important;
}

.title-section-simple h2 {
    color: #2A3F54!important;
}

.title-section-simple span.color-accent{
    color: #74ABE1!important;
}

.ce_text.format-p-small p{
    font-weight: 600;
}

.ce_list.style2.hasIcon ol li{
    color: #74ABE1;
    font-weight: 600;
    font-size: 1.1rem;
}



/*
============================================
Outil complet
============================================
*/

/*Simplifier*/

.subtitle-outil-complet-simplifier{
    color: #A7E8F3!important;
}

.outil-complet-simplifier span.color-accent{
    color: #fff!important;
}

.outil-complet-simplifier h2{
    color: #A7E8F3!important;
}


/*Prévoir*/

.subtitle-outil-complet-prevoir{
    color: #F3BDA7!important;
}

.outil-complet-prevoir span.color-accent{
    color: #262626!important;

}

.outil-complet-prevoir h2{
    color: #F3BDA7!important;
}


/*Définir*/

.subtitle-outil-complet-definir{
    color: #F3EBA7!important;
}

.outil-complet-definir span.color-accent{
    color: #fff!important;

}

.outil-complet-definir h2{
    color: #F3EBA7!important;
}

/*
============================================
Adaptée aux petites structures
============================================
*/

.petite-structure span.color-accent{
    color: #8B904B!important;
}

.petite-structure h2{
    color: #262626!important;
}

.petite-structure-subtitles{
    color: #8B904B!important;
}

.valeurs-section-title span.color-accent{
    color: #8B904B!important;
}

.valeurs-section-title h3{
    color: #262626!important;
}

.valeurs-title p{
    color: #8B904B!important;
}

.valeurs-description p{
    color: #8B904B!important;
}


/*
============================================
Tarifs
============================================
*/


.tarifs-title span.color-accent{
    color: #A7AFF3!important;
}

.tarifs-title h2{
    color: #262626!important;
}

.description-section-tarifs .col_3{
    max-width: calc((40% / 12) * 3);
}


.title-packages{
    color: #A7AFF3!important;
}

.ce_pricetable .pricetable.highlight .title{
    background: #2A3F54!important;
}

.tarifs-choice .ce_hyperlink a, a.btn{
    border-radius: 5px;
    background: none;
    border-color: #5A6AF2;
    color: #5A6AF2!important;
}

.tarifs-choice .priceinfo{
    color: #5A6AF2;
}

.tarifs-choice .title{
    font-size: 1.5rem;
    font-weight: 700;
}

.tarifs-choice .pricetable{
    margin: 0rem;
    border-radius: 5px;
}

.tarifs-choice .hightlight_text{
    background: #A7AFF3;
    color: #5A6AF2;
    font-size: 0.75rem;
    font-weight: 700;
}
/*
============================================
Formulaire de réservation
============================================
*/

.reservation-form-title span.color-accent{
    color: #43785A!important;
}

.reservation-form-title h2{
    color: #262626!important;
}

/*
============================================
Site web sur mesure
============================================
*/

.site-web-subtitle{
    color: #D8FBE7!important;
}

.pas-de-panique p{
    color: #D8FBE7!important;
}

.ce_bgimage{
    border-radius: 15px;
}


/*
============================================
FAQ
============================================
*/

.faq-title span.color-accent{
    color: #4A3AFF!important;
}

.faq-title h2{
    color: #262626!important;
}

.ce_accordion{
    border-radius: 0.875rem;
    
    box-shadow: 0px 6px 16px 0px rgba(74, 58, 255, 0.19);
    margin-bottom: 1.83rem;
}

.ce_accordion .toggler:before{
    color: #4A3AFF!important;
}

.ce_accordion .toggler{
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: #170F49;
    font-size: 1.375rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.ce_accordion .toggler.ui-state-active{
    border-bottom: none;
}


.ce_accordion .accordion{
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: #6F6C90;
    font-size: 1.125rem;
}

/*
============================================
Avis
============================================
*/



.avis-title span.color-accent{
    color: #262626!important;

}

.avis-title h2{
    color: #F3D4A7!important;
}


/*
============================================
Formulaire de contact
============================================
*/

.title-section-form-contact{
    color: #fff!important;
    font-size: 2.5rem;
}

.texte-section-form-contact{
    color: #fff!important;
    font-weight: 600;
}

.subtitle-section-form-contact{
    color: #fff!important;
}

.liste-section-form-contact{
    color: #fff!important;
}




.form-contact.block form.style4{
    background: #fff!important;
}

.form-contact.block form.style4 label{
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: #0A142F;
}

.form-contact.block form.style4 button.submit{
    padding-top: 1.8rem;
    padding-bottom: 2.8rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    background: #0081FE;
}

.form-contact.block form.style4 p{
    text-align: left!important;
    font-weight: 100;
    font-size: 0.95rem;
}

/*
============================================
Essai Gratuit
============================================
*/

.title-section-essai-gratuit{
    color: #E84824!important;
}

.subtitle-section-essai-gratuit{
    color: #E84824!important;
}

/*Form*/

.block form.style4{
    background: #fcf1ee!important;
    border: none;
    border-radius: 20px;
}

.block form.style4 input{
    background-color: #fff!important;
    border-radius: 5px;
}


.block form.style4 select{
    background-color: #fff!important;
    border-radius: 5px;
}

.block form.style4 label{
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: #262626;
}

.block form.style4 button.submit{
    padding-top: 1.8rem;
    padding-bottom: 2.8rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

.block form.style4 p{
    text-align: left!important;
    font-weight: 100;
    font-size: 0.95rem;
}


/*
============================================
Swiper Slider
============================================
*/

.ce_swiper-slider-start.style2_light .swiper-pagination-bullet {
    background: rgba(0,0,0,0.3);

}
.ce_swiper-slider-start.style2_light .swiper-pagination-bullet-active::after {
    background-color: #050505;
}

.ce_swiper-slider-start.style2_light .swiper-pagination-bullet-active::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 35px;
    position: absolute;
    left: 1px;
    top: -4px;
  
}



@media screen and (max-width: 820px) {
    h1{
        font-size: 2rem;
    }

    .button-hero-call.ce_hyperlink a.link-white{
        font-size: 0.8rem;
    }

    .mod_article.fullscreen .container{
        background: #3D9FFE;
    }

    #footer .h2{
        font-size: 1.5rem;
    }

    .fleche-hero{
        display: none;
    }
}


@media screen and (max-width: 415px) {
    h1{
        font-size: 1.9rem;
    }

    .subtitle-hero-top.txt-color-white{
        font-size: 0.8rem;
    }

    

    h2 {
        font-size: 1.7rem;
    }
    
    span.color-accent{
        font-size: 1.7rem;
    }

    .fleche-name{
        display: none;
    }

    .fleche-web{
        display: none;
    }
    
}