﻿
:root {
    --white: #FFFFFF;
    --grey: #343a40;
    --lightGrey: #555;
    --clearGrey: #EFF0F0;
    --orange: #FD601B;
    --blue: #00AEFF;
    --rgbaGrey: rgba(52, 58, 64, 0.3);
    --rgbaOrange: rgba(253, 96, 27,0.4);
    --rgbaOrangeHover: rgba(253, 255, 27,0.001);
    --rgbaLightGrey: rgba(85, 85, 85, 0.3);
    --rgbaClearGrey: rgba(239, 240, 240, 0.3);
    --cardClearGrey: #e0e0e0;
    --cardRadius: 0.625rem;
}

/*-------------------Body------------------------------------------*/
body {
    background-color: var(--white);
    font-family: "Varela Round", Calibri,Verdana, Arial;
    color: var(--grey);
    padding: 0;
    margin: 0;
    /*display: flex;*/
    /*justify-content:center;*/
    flex-direction: column;

    /*animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;*/
}

/*@keyframes fadeInAnimation {
    0% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}*/

strong {
    color: var(--orange);
}

/*-------------------Copy Right------------------------------------------*/
.copyRight {
    font-family: Calibri,Arial;
    font-size: 15px;
}

/*-------------------Render------------------------------------------*/
.render {
    background-color: var(--white);
}

/*-------------------fic-image------------------------------------------*/
.fic-gallery {
    /*border-top: 2px solid var(--orange);*/
    /*width: 200px;*/
    box-shadow: 0px 5px 5px 0px var(--rgbaGrey);
    padding: 5px;
    height: 125px;
    margin: 15px;
}

    .fic-gallery:hover {
        background-color: var(--grey);
        transition: 0.8s;
        color: var(--clearGrey);
        box-shadow: 0px 3px 3px var(--rgbaOrange);
        cursor: pointer;
        /*opacity:30%;*/
        /*border-radius: 100px 0px 100px 0px; /*TopLeft , TopRight, BottomRight, BottomLeft*/
    }

.fic-image {
    /*border:2px solid var(--gray);*/
    /*border-radius: var(--cardRadius) !important;*/
    box-shadow: 0px 5px 5px 0px var(--rgbaGrey);
    padding: 5px;
   /*background-color:palegreen;*/
}

    .fic-image:hover {
        background-color: var(--orange);
        transition: all 0.5s;
        /*cursor: pointer;*/
    }

img.fic-image {
    width: 100%;
    /*border-top-left-radius: var(--cardRadius);
        border-top-right-radius: var(--cardRadius)*/
}

.fic-picto-size{
    width:100px;
    height:100px;
}

/*-------------------Card------------------------------------------*/
.fic-card-body-real {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /*padding: 1.25rem;*/ 
}

.fic-card-body-real2 {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.fic-card-real {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    /*border: 1px solid rgba(0, 0, 0, 0.125);*/
    border-radius: 0.625rem;
}

.fic-card-real2 {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    /*border: 1px solid rgba(0, 0, 0, 0.125);*/
    border-radius: 0.625rem;
}

.card, .fic-card-real, .fic-card-real2 {
    border: none;
    border-radius: var(--cardRadius) !important;
    /*box-shadow: 0px 10px 10px -5px var(--rgbaGrey);*/
    box-shadow: 0px 3px 3px var(--rgbaLightGrey);
    /*border: 1px solid springgreen;*/
}

.card-header, .fic-card-header-real, fic-card-header-real2 {
    /*background-color: var(--blue);*/
    /*color: var(--white);*/
    font-size: 18px;
    font: bold !important;
    vertical-align: middle;
    border-top-left-radius: var(--cardRadius) !important;
    border-top-right-radius: var(--cardRadius) !important;
    /*border-bottom-left-radius: var(--cardRadius) !important;
    border-bottom-right-radius: var(--cardRadius) !important;*/
    border-bottom: 0;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.125);*/
    cursor: pointer;
}

    .card-header:hover, .fic-card-header-real:hover {
        background-color: var(--rgbaOrange);
        border-bottom-left-radius: var(--cardRadius) !important;
        border-bottom-right-radius: var(--cardRadius) !important;
        cursor: pointer;
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
    }

    .fic-card-header-real2:hover {
        background-color: var(--rgbaOrange);
        cursor: pointer;
    }


.fic-card, .fic-card-home {
    /*border: 1px solid var(--lightGrey);*/
    border-radius: var(--cardRadius) !important;
    box-shadow: 0px 5px 5px 0px var(--rgbaGrey);
    /*box-shadow: 0px 3px 3px var(--rgbaLightGrey);*/
    width: 110px;
    margin: 10px;
}
    .fic-card:hover {
        background-color: var(--rgbaOrange);
        /*cursor: pointer;*/
    }

.fic-card-img {
    width: 100%;
    border-top-left-radius: var(--cardRadius);
    border-top-right-radius: var(--cardRadius)
}

.fic-sub-title {
    font-weight: bold;
    font-size: 18px;
    color: var(--grey);
}

.fic-card-home {
    border-top: 2px solid var(--orange);
    width: 330px;
    margin: 15px;
}
    .fic-card-home:hover {
        background-color: var(--grey);
        transition: 0.8s;
        color: var(--clearGrey);
        box-shadow: 0px 3px 3px var(--rgbaOrange);
        cursor:pointer;
        /*border-radius: 100px 0px 100px 0px; /*TopLeft , TopRight, BottomRight, BottomLeft*/
    }

/*-------------------flip-card--------------------------------------*/
.flip-card {
    background-color: transparent;
    width: 250px;
    height: 155px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

.flip-card-front, .flip-card-back {
    margin:auto;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: transparent;
    color: var(--grey);
}

.flip-card-back {
    background-color: var(--white);
    opacity:0.8;
    color: var(--grey);
    transform: rotateY(180deg);
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    cursor: pointer;
}


/*-------------------Table--------------------------------------*/
#ficdatatable {
}

    #ficdatatable th {
        font-size: 18px;
        color: var(--orange);
        /*border: 0;*/
        border-bottom: 5px solid var(--blue);
        /*border-top: 1px solid var(--blue);*/
    }

    #ficdatatable tr {
        /*border-top: 1px solid var(--orange);*/
        /*border-bottom: 1px solid var(--orange);*/
        /*box-shadow: 0px 2px 2px var(--rgbaLightGrey);*/
    }

    #ficdatatable td {
        border-top: 1px solid var(--orange);
        /*border-bottom: 1px solid var(--orange);*/
    }

        #ficdatatable tr:nth-child(even) {
            /*background-color: var(--clearGrey);*/
        }

    #ficdatatable td:hover {
        background-color: rgba(253, 255, 27,0.001); /*rgba(0, 148, 255,0.9);*/
        color: var(--grey);
        border-bottom: 3px solid var(--orange);
        /*font-size:x-large;*/
        /*transition:all 0.5s;*/
    }

    #ficdatatable td:hover {
        background-color: rgba(253, 96, 27,0.09);
        color: var(--grey);
        font-weight: bold;
        transition: all 0.5s;
    }

/*------------------------fa------------------------------------------*/
.fa-angle-up {
    color: var(--grey);
    font-size: x-large;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fa-angle-down {
    color: var(--orange);
    font-size: x-large;
    border-bottom-left-radius: var(--cardRadius);
    border-bottom-right-radius: var(--cardRadius);
}

.fa-plus-circle {
    color: var(--orange);
    font-size: large;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fa-minus-circle {
    color: var(--grey);
    font-size: large;
    border-bottom-left-radius: var(--cardRadius);
    border-bottom-right-radius: var(--cardRadius);
}

.fa-bars{
    cursor :pointer;
}
    .fa-bars:hover{
        color:var(--white);
    }

.fa-times {
    color:var(--orange);
}
/*-------------------Style the div-------------------------*/
.fic-div-flex-center {
    display: flex;
    justify-content: center;
    /*border: 1px solid red;*/
    margin: auto;
}

.fic-div-page-ref:hover {
    transition: 0.8s;
    box-shadow: 0px 3px 3px -1px var(--rgbaOrange);
}
/*-------------------Style the header-------------------------*/
.fic-header {
    background-color: transparent;
    /*margin: 0px;
    padding: 0px;*/
    text-align: left;
    font-size: 18px;
    color: var(--orange);
  
    /*box-shadow: 0px 3px 3px var(--orange);*/
    /*border-radius: 0px 0px;*/
}

#fic-link-animation {
    animation-name: phone;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
}
@keyframes phone {
    0% {
        color: var(--grey);
    }

    100% {
        color: var(--orange);
    }
}

/*-------------------Style the hr-------------------------*/
hr.line {
    border-top: 1px dashed;
    color: var(--orange);
    /*width: 60px;*/
}

hr.footer-line {
    border-top: 5px solid;
    color: var(--blue);
    width: 45px;
}

/*-------------------services image-------------------------*/
.service-image {
    /*border:2px solid var(--gray);*/
    /*border-radius: var(--cardRadius) !important;*/
    box-shadow: 0px 5px 5px 0px var(--rgbaGrey);
    padding: 5px;
    /*background-color:palegreen;*/
}

    .service-image:hover {
        /*background-color: var(--orange);*/
        /*transition: all 0.5s;*/
        /*cursor: pointer;*/
    }

img.service-image {
    width: 100%;
    /*border-top-left-radius: var(--cardRadius);
        border-top-right-radius: var(--cardRadius)*/
}


/*-------------------Style the services link-------------------------*/
.service-link {
}

a.service-link {
    text-decoration: none;
    color: var(--orange);
}
    a.service-link:hover {
        color: var(--blue);
    }
        .active a.service-link {
            color: var(--blue) !important;
        }

/*-------------------Style the header-------------------------*/
.header-link {
}
    a.header-link {
        text-decoration: none;
        color: var(--grey);
    }
        a.header-link:hover {
            color: var(--orange);
        }
            .active a.header-link {
                color: var(--orange) !important;
            }

/*-------------------Style the footer-------------------------*/
.footer-link {

}
    a.footer-link {
        text-decoration: none;
        color: var(--clearGrey);
    }
       /* a.footer-link:visited {
            color: var(--blue) !important;
        }*/
        a.footer-link:hover {
            color: var(--orange) !important;
        }
            .active a.footer-link {
                color: var(--blue) !important;
            }

/*-------------------fic-contact-------------------------*/
.fic-contact {
    /*text-align: center;*/
    color: var(--clearGrey);
}
    a.fic-contact  {
        text-decoration: none;
        /*color: var(--clearGrey);*/
    }
       /* .fic-contact a:visited {
            color: var(--blue);
        }*/
        a.fic-contact a:hover {
            color: var(--orange);
        }
        .active a.fic-contact {
            color: var(--orange);
        }

/*-------------------divService-------------------------*/
.fic-div-hover {
    /*display:inline-block;*/
    background-color: var(--white);
    margin: auto;
    border-top: 5px solid var(--orange);
    box-shadow: 0px 6px 3px var(--rgbaLightGrey);
    /*border-radius: 100px 0px 100px 0px; /*TopLeft , TopRight, BottomRight, BottomLeft*/
}

    .fic-div-hover.a {
        text-decoration: none;
    }

    .fic-div-hover:hover {
        background-color: var(--grey);
        transition: 0.8s;
        color: var(--clearGrey);
        box-shadow: 0px 3px 3px var(--rgbaOrange);
    }

/*-------------------general-link-------------------------*/
.general-link {

}

general-link a{
    text-decoration: none;
    color: var(--grey);
}

    a.general-link:hover {
        color: var(--orange);
    }

/*-------------------fic-box-------------------------*/
.fic-box {
    padding-bottom: 0px;
    background-image: linear-gradient(var(--orange),var(--orange));
    background-size: 75px 2px;
    background-position: bottom left;
    background-repeat: no-repeat;
    /*text-align:center;*/
}

    .fic-box .blue {
        background-image: linear-gradient(var(--orange),var(--blue));
    }
    /*-------------------fic-div-page-------------------------*/
    .fic-div-page {
        background-color: var(--white);
        /*margin: auto;*/
        /*padding:0px;*/
        box-shadow: 0px 10px 10px -5px var(--rgbaLightGrey);
        /*border-bottom:1px solid var(--orange);*/
    }

/*-------------------fic-icon-------------------------*/
.fic-icon {
    color: var(--orange);
    transition: all .5s;
}

a.fic-icon:hover {
    color: var(--clearGrey);
}

.fic-social-media {
    border:10px;
    color: var(--orange);
    transition: all .5s;
}

a.fic-social-media:hover {
    color: var(--grey);
}

/*-------------------fic-nav-------------------------*/
.nav {
    /*text-align: left!important;*/
    text-align: center;
}
.fic-nav a {
    margin: 0 0 0 15px;
    font-size :13.5px;
    color: var(--clearGrey) !important;
    
    text-transform: uppercase;
    display: block;
}
    .fic-nav a:hover {
        color: var(--orange) !important;
        /*border-bottom: 5px solid transparent;*/
    }

.active a { /*classe mise adapter pour le menu principal*/
    color: var(--orange) !important;
}

.move-right {
    float: right;
}

.fic-footer, .fic-footer-bottom {
    /*text-align: center;*/
    color: var(--grey);
    font-family:Calibri;
}
a.fic-footer, a.fic-footer-bottom {
    text-decoration: none;
    color: var(--grey);
}
        a.fic-footer:hover {
            color: var(--lightGrey);
        }

        a.fic-footer-bottom:hover {
            color: var(--white);
        }

.fic-mission {
    text-align: justify;
    color: var(--clearGrey);
}

.fic-logo {
    border: 1px solid;
    color: var(--orange);
}


/*-----------------Tooltip-------------------------------*/
.tooltip-danger .tooltip-inner {
    background-color: var(--orange);
    color: var(--white);
    border: 1px solid var(--orange);
    box-shadow: 0px 5px 10px -3px var(--clearGrey);
    opacity: 1 !important;
}

.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
    border-top-color: var(--orange);
}

.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
    border-right-color: var(--orange);
}

.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: var(--orange);
}

.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
    border-left-color: var(--orange);
}

/*-----------------Background---------------------*/
.fic-bg-grey {
    background-color: var(--grey);
    opacity: 1;
    color: var(--orange) !important;
    border-bottom: 5px solid var(--orange);
    /*border-bottom-color: var(--orange);*/
}

.fic-bg-grey-radius-top {
    background-color: var(--grey);
    opacity: 0.95;
    color: var(--orange) !important;
    border-top-left-radius: var(--cardRadius);
    border-top-right-radius: var(--cardRadius);
    border-bottom: 5px solid var(--orange);
    vertical-align:middle;
}

.fic-bg-blue-radius-top {
    background-color: var(--blue);
    opacity: 0.95;
    color: var(--grey) !important;
    border-top-left-radius: var(--cardRadius);
    border-top-right-radius: var(--cardRadius);
    border-bottom: 5px solid var(--grey);
    vertical-align: middle;
}

.fic-bg-orange-radius-top {
    background-color: var(--orange);
    opacity: 0.95;
    color: var(--grey) !important;
    border-top-left-radius: var(--cardRadius);
    border-top-right-radius: var(--cardRadius);
    border-bottom: 5px solid var(--lightGrey);
    vertical-align: middle;
}

.fic-bg-light-grey {
    background-color: var(--lightGrey);
    color:var(--orange);
}

.fic-bg-clear-grey {
    background-color: var(--clearGrey);
    color: var(--grey);
}

.fic-bg-orange {
    background-color: var(--orange);
    color: var(--clearGrey);
    margin-left:auto;
}

.fic-bg-blue {
    background-color: var(--blue);
    color: var(--clearGrey);
    margin-left: auto;
}

.fic-bg-white {
    background-color: var(--white);
    color: var(--grey);
}

/*-----------------Text---------------------*/

.center {
    margin: auto;
    /*border: 2px solid yellow;*/
    text-align:center;
    /*vertical-align:middle;*/
    /*padding:50px 0px;*/
}

.fic-text-align-left {
  text-align:left;
}

.fic-text-align-justify {
    text-align: justify;
}

.fic-text-orange {
    color: var(--orange);
}

.fic-text-white {
    color: var(--clearGrey);

}


.fic-text-grey {
    color: var(--grey);
    /*text-align:justify;*/
}

.fic-font-title {
    font-size: 47px;
    font-weight: 900;
    color: var(--white);
}


/*-----------------Form---------------------*/
.form-control {
    /*border-radius: 0;*/
}

.fic-div-form {
    /*background-color: var(--clearGrey);*/
    /*margin: auto;*/
    /*display:inline-block;*/
    /*justify-content:center;*/
    border-top: 2px solid var(--orange);
    border-radius:var(--cardRadius);
    box-shadow: 0px 5px 5px 0px var(--rgbaLightGrey);
}

    .fic-div-form:hover {
        box-shadow: 0px 5px 5px var(--rgbaOrange);
        transition: all 0.5s;
    }
/*-----------------Buttons---------------------*/
.btn{
    border-radius:0px;
}

.scrollBtn {
    width: 45px;
    height: 45px;
}
#scrollBtn {
    display: none;
    position: fixed;
    bottom: 88px;
    right: 20px;
    z-index: 99;
    font-size: 30px;
    border: none;
    outline: none;
    background-color: var(--orange);
    color: var(--white);
    cursor: pointer;
    padding: 0px;
    /* Animation */
    animation-name: bounce;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    /*border-radius: 25px 25px 0px 0px;*/
    /*border-radius: 25px 0px 25px 0px;*/
}

    #scrollBtn:hover {
        background-color: var(--lightGrey);
        transition:all 0.2s;
    }
@keyframes btnup {
    0% {
        bottom: 88px;
    }
    100% {
        bottom: 78px;
    }
}

@keyframes bounce {
    0% {
        margin-top: 0;
    }

    50% {
        margin-top: -15px;
        margin-bottom: 15px;
    }

    100% {
        margin-top: 0;
    }
}

.btn-default.orange {
    background-color: var(--orange);
    border: var(--orange);
    color: var(--clearGrey);
}

.orange:hover {
    background-color: var(--grey);
    border: none;
    transition: all 0.5s;
}

.orange:focus, .orange.focus {
    box-shadow: 0 0 0 0.2rem rgb(248, 164,112, 0.50);
}

/*-----------------Loader---------------------*/
/* Center the loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

#master585 {
    display: none;
    text-align: center;
}