/* you can add your own custom css here if you don't want to worry about SASS/SCSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

body {
    margin: 0;
    font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
    font-weight:300;
    font-size: 1.05em;
    line-height: 1.5em;
    color: #575756;
    background-color: #fff;
    margin:0;
    padding:0;
}

.home .siteBody{
    margin-top:-12em;
}

.contact .siteBody{
    margin-top:3em;
}

h1, h2, h3{
    font-family: 'Exo', sans-serif;
}

h1 {
    color:#323946;
    text-transform:uppercase;
    margin-bottom:2em;
    text-align:center;
    position: relative; /* Pour positionner la flèche par rapport au titre */
    padding-top:0.8em;
}

h1::before {
  content: "";
  position: absolute;
  top: 0;
    left: 50%; /* Positionne le début du trait au centre */
  transform: translateX(-50%); /* Décale le trait de sa moitié de largeur pour le centrer parfaitement */
  width: 150px;
  height: 8px;
  background-color: #007DB7;
}

/*h1::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px; /* Ajustez la position de la flèche */
  /*transform: translateY(-50%);
  border-left: 15px solid #06508B; /* Couleur et taille de la flèche */
  /*border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}*/

h2 {
    color:#06508B;
    border-bottom: #333333 1px dotted;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    text-align: center;
    font-size: 2.2em;
    width:100%;
}

#ID1741513131734 h2{
    border-color:white!important;
}

h3{
    font-size:1.5em;
    color:#5785b2;
}

h4{
    font-size:1em;
}

a{
    color:#007DB7;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

#ID1741605270637 a{
    color:white;
    text-decoration:underline;
}

li::marker {
  font-size: 1.5em; /* Ajustez la taille selon vos besoins */
  color: #007DB7; /* Changez la couleur si nécessaire */
  /* D'autres propriétés CSS peuvent être utilisées ici */; 
}


blockquote{
    padding-left:1em;
    font-size:1.5em;
    line-height:1.5em;
    margin-bottom:1.2em;
    border-left:grey 5px solid
}

button.cf-btn, .buttontextck{
    font-family: 'Exo', sans-serif !important;
    font-weight:400 !important;
    font-size:1.1em!important;
}

button.cf-btn:hover{
    background-color:#E54420 !important;
    opacity:1 !important;
}

header .container{
    display:flex;
    align-items:center;
}

#topbar{
    font-size:0.9em;
    background:#13235B;
    color:white;
    font-family: 'Exo', sans-serif;
}

#topbar p{
    padding-block:0.8em;
    margin:0;
}

#topbar .container{
    display: flex;
    justify-content: space-between;
}

.topbar-left{
    display:flex;
}
.topbar-left .custom{
    margin-right:1.5em
}

.topbar-left #mod-custom96{
    padding-right:1em;
    border-right:thin solid #ffffff;
}

header .header{
    margin-block: 1.5em;
    display: flex;
    justify-content: space-around;
    /* margin-inline: auto; */
    /* max-width: 100%; */
}

#menu{
    background:#13235B;
    padding: 2em;
    font-family: 'Exo', sans-serif;
}

#menu .container{
    background:#13235B;
    text-align:center;
    display:flex;
    justify-content:center;
}

/*MENU MOBILE*/

[data-id="maximenuck138"] .mobilemenuck-bar-title {
    background: none!important;
    font-size: 1.4em !important;
    margin-right:2.5em!important;
}
.mobilemenuck-title{
    display:none !important;
}

[data-id="maximenuck138"] .mobilemenuck-bar-button {
    background: #ffffff !important;
    color: #13235B !important;
    font-size: 2em!important;
    font-weight:bold!important;
}

.mobilemenuck-topbar{
    margin-bottom:4em !important;
}

[data-id="maximenuck138"].mobilemenuck , [data-id="maximenuck138"] .mobilemenuck-title {
    background: #13235B !important;
}

[data-id="maximenuck138"] .mobilemenuck-item > .level1 {
    background: none!important;
    -moz-border-radius: 0px!important;
    -o-border-radius: 0px!important;
    -webkit-border-radius: 0px!important;
    border-radius: 0px!important;
    margin-top: 1em!important;
    margin-left: 1em !important;
    padding-bottom:1em!important;
    border-bottom:1px solid #ffffff !important;
}

#logo{
   width:20%;
    margin-right:8%

}

#infosupp{
  width:72%;
}

#infosupp .innercontent{
    display:flex;
    justify-content:center;
}

#infosupp p{
    margin-left:0.8em;
    margin-bottom:0;
}

/* Style de base du menu */
#mainmenu a {
  position: relative; /* Pour permettre le positionnement absolu de la flèche */
  font-weight:400!important;
}

/* Style de la flèche */
#mainmenu li.current::after {
  content: "";
  position: absolute;
  bottom: -15px; /* Ajustez la position verticale */
  transform: translateX(-50%); /* Pour centrer la flèche */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #ffffff; /* Couleur de la flèche */
}

#mainmenu a{
    color:#ffffff;
    margin-inline:1em;
    font-size:1.3em;
    font-weight:300;
    text-align:center;
    padding:0.6em;
}

#mainmenu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; 
  background-color: #ffffff; /* Couleur de la bordure */
    transition: transform 0.3s ease, width 0.3s ease;
}

#mainmenu a:hover::after {
  width: 110%;
left: -5%;
    transition: transform 0.3s ease, center 0.3s ease;
}

#mainmenu a::before {
  content: ''; /* Créer un pseudo-élément pour la bordure */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Épaisseur de la bordure */
  background-color: #ffffff; /* Couleur de la bordure */
  transform: translateY(850%); /* Positionner la bordure en haut, hors de l'élément */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Ajouter une transition pour l'animation */
    opacity:0
}

#mainmenu a:hover::before {
    width: 110%;
    left: -5%;
    transform: translateY(0); /* Déplacer la bordure vers le bas au survol */
    transition: transform 0.3s ease;
    opacity: 1;
}


#logo img{
    max-width:14.5em;
}

.content-top .mod-randomimage img{
    width:100%
}

/*TITRE PAGE*/
.home #page-heading{
    display:none;
}

#page-heading{
    background:#F0FAFE;
    display: flex;
}

#page-heading h1{
    margin-block:0.5em;
}

/*PRODUITS*/
#ID1741592680336_tabs{
    display:flex;
}

#ID1741592680336_tabs ol{
    background: #13235B;
    width: 45% !important;
    text-align:right;
    
}

#ID1741592680336_tabs li{
    background: none;
    border:none;
    cursor:pointer!important;
    padding-block:1em;    
}

#ID1741592680336_tabs a{
    color:white;
    font-family: 'Exo', sans-serif;
    text-transform:uppercase;
    font-weight:500;
    cursor:pointer!important;
    margin-right:1em;
    opacity:0.7;
}

#ID1741592680336_tabs li.ui-tabs-active a{
    opacity:1;
}

#ID1741592680336_tabs li.ui-tabs-active a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px; /* Ajustez la position de la flèche */
  transform: translateY(-50%);
  border-right: 10px solid #F8FAFF; /* Couleur et taille de la flèche */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

#ID1741592680336 .tabck{
    /* margin-left:45%; */
    background: #F8FAFF;
    font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
    flex-grow: 1;
    width: 55%;
    margin-left:0;
}

/*PRESTATIONS*/
#ID1740391908391 .inner, #ID1740392026064 .inner, #ID1740392069704 .inner, #ID1740392070144 .inner {
    min-height:365px;
}

/*FORMULAIRE DE CONTACT*/
#cf1 label{
    font-family: 'Exo', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    color:#465061;
    
}

#cf1 input, #cf1 textarea{
    border:none; 
    border-bottom:3px solid #007DB7;
    border-radius:0;
    margin-bottom:2em;
    background:#F0FAFE
}


ul.check li::marker {
  content: "✓  "; /* U+2713 */
    font-weight:bold;
    margin-left:5em;
}

ul.check li{
    margin-bottom:1em;
}

/*Module Newsletter*/
section.newsletter{background:#13235B;}
section.newsletter h2{color:white; text-transform:uppercase; padding:0;}
.cf-one-fourth-large{width:40% !important; align-self: center;}
.cf-one-fourth-small{width:10% !important;}


/*RESPONSIVE*/

@media screen and (max-width:1399px){
   #topbar .container, header .header{
        max-width:100%;
    }

    header .header{
        margin-inline:0;
    }
}

@media screen and (max-width:1290px){
    #mainmenu a {
        margin-inline: 1em;
    }

    .home .siteBody{
        margin-top:-8em;
    }
}


@media screen and (max-width:1200px){
    #logo {
        max-width:30%;
    }
    #infosupp{
        justify-content:end;
        max-width: 70%;
    }

    .newsletter .container{
        max-width:100%;
    }

    .bottomfooter{
        margin-top: -100px;
    }
}

@media screen and (max-width:1048px){
    .newsletter .title{
        max-width: 250px !important;
    }

    .newsletter .cf-one-fourth-small{
        max-width:150px !important;
        width:150px !important;
    }
}

@media screen and (max-width:1140px){
    #mainmenu a {
        margin-inline: 0.5em;
    }
}

@media screen and (max-width:1038px){
    #menu .container {
        justify-content: right;
        padding: 0;
    }
}

@media screen and (max-width:991px){
    .container{
        max-width:100%;
        padding-inline: 1.5em;
    }
}

@media screen and (max-width:972px){
    .bottomfooter{
        background-size:auto;
        padding-inline:1.2em;
        padding-bottom:0.5em
    }
    
    .bottomfooter p{
        font-size:12px;
        max-width:70%
    }
}


@media screen and (max-width:940px){
    header .header{
        justify-content:space-between;
    }
    
    #logo, #infosupp{
        width:50%;
    } 
    #infosupp .rowck > .inner{
        flex-wrap:wrap;
    }

    #infosupp .rowck > .inner > .blockck{
        width:100%;
        margin-block:0.5em;
    }

    #infosupp .innercontent{
        justify-content:left;
    }
}

@media screen and (max-width:865px){
    #row_ID1740391666836 > .inner > .blockck{
        width:100% !important;
        margin-block: 1.5em;
    }

    #ID1740391908391 .inner, #ID1740392026064 .inner, #ID1740392069704 .inner, #ID1740392070144 .inner {
        min-height:200px;
    }
}

@media screen and (max-width:825px){
    .newsletter .cf-fields{
        flex-direction:column;
        width:100%;
        align-content: center;
    }

    .newsletter .title,  .newsletter .cf-two-fourths, .newsletter .cf-one-fourth-small{
        max-width: 100% !important;
        width:100% !important;
        display:flex;
        justify-content: center;
        margin-block:0.3em;
    }


    .newsletter .cf-two-fourths .cf-control-input{
        max-width: 100% !important;
        width:100% !important;
    }
}

@media screen and (max-width:640px){
    .container{
        padding-inline: 3em;
    }
}

@media screen and (max-width:621px){
    header .header{
    flex-direction: column;
    padding-inline:0.5em;
    }

    #topbar .container{
       padding-inline:0.5em; 
    }

    #logo, #infosupp{
        max-width:100%;
        width:100%;
        justify-content:center;
        
    } 

    #logo{
        margin-bottom:1.5em;
        text-align:center;
    }
}