@import "color.css";
body {

    font-family: 'News Gothic MT', sans-serif!important;
    color:var(--dark)!important;
}

.main-color{
    color:var(--main); 
}
.dark-color{
    color:var(--dark);/*  dark accent *//*  dark accent */
}
.light-color{
    color:var(--light);/*  light */}
.light-accent{
    color:var(--light-accent); /*  light acctent */}

.white{
    color:var(--custom-white);/*  whight */
}
/** Param GENERAL **/
.mb-5, .my-5 {
    margin-bottom: 1em!important;
    }
    
.mb-6, .my-6 {
    margin-bottom: 3em!important;
}

/** Param FONTS **/
h1, h2, h3, h4, h5, h6, strong {
    font-weight: 700;
    
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Gentium Basic', serif;
}
.h1, h1 {
    font-size: 3rem;
}
.h2, h2 {
    font-size: 2.5rem;
}
.h3, h3 {
    font-size: 1.8rem;
}
.h5, h5 {
    font-size: 1.5rem;
}
.h6, h6 {
    font-size: 1.3rem;
}

p{
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: 400;
}
p.lead{
    margin-top: 1.1rem;
    text-align: justify;
    line-height: 1.6;
    font-size: 1rem;

}
a{
    font-size: 1.1rem;
    font-weight: 400;
}
.italic{
    font-style: italic;

}
.bold{
    font-weight: 700;
}
.underline{
    text-decoration: underline;
}
.highlight{
    margin-left: 2.5rem;
}



/** FIN Param FONTS **/

/** Param Background **/
.bg-light{
    background-color: var(--light)!important;
}
.bg-dark {
    background-color: var(--dark)!important;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark p, .bg-dark a{
    color: var(--light);
}
#sidebar-wrapper {
	background: #191a1b;
    
}

/** FIN Param Background **/


/** Param Boutton **/
div[class^="btn-"] {
    line-height: 1;
  }
.btn-primary {

    font-size: 1.4rem;
    background-color: var(--custom-white)!important;
    border-color: var(--custom-white)!important;

    color: var(--dark)!important;

    box-shadow: 0 6px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 6px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    --o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--light-accent) !important;
    border-color: #e2e2e2!important;
    /* border-color: #302f2f !important; */
    
    
}
.btn-primary:disabled{
    border: 1px solid #999999!important;
    background-color: #000000!important;
    color: #666666!important;
}
.btn-primary:disabled .ico-btn{
    fill: #666666;
}
.btn-tertiary{
    
    background-color: var(--light-accent);
    color: var(--light)!important;
    padding: 0.8em;
    margin-top: 1em;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    --o-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;

}
.btn-tertiary:hover, .btn-tertiary:active, .btn-tertiary:focus{
    background-color: var(--main);
    color: var(--light)!important;
}

.btn-center{
    display: flex;
    justify-content: center;
}

.btn-rgpd{

    background-color: var(--light-accent);
    color: var(--light)!important;
    padding: 0.3em;
    margin-top: 1em;

    font-size: 0.8em;
    margin-left: auto;
    margin-right: auto;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    --o-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;
}


/** Param Boutton **/



/** PARAM ICON **/

.ico-section, .ico-section g {
    fill: var(--main)!important;
    color: var(--main)!important;


    font-size:2.0em;

    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    vertical-align: middle;

    overflow: inherit;

}
svg.ico-section {
    
    height: 2.4rem;
    width: 2.4rem;
}

.ico-service, .ico-service g{
    fill: var(--light-accent)!important;
    
    height: 3.5rem;
    width: 3.5rem;

    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    margin-bottom: 0.5rem;

    overflow: inherit;
}

.ico-section.dark{
    fill: var(--main)!important;
    color: var(--main)!important;
}


.ico-btn, .ico-btn g{
    fill: var(--main);
    
    height: 2.4rem;
    width: 2.4rem;

    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    vertical-align: middle;
}
.service-icon {
    
	line-height: 6.8rem;
	border-radius: .50rem;
}


/** FIN PARAM ICON **/

/** **/

/** PARAM NAV **/

.menu-toggle {
	background:var(--light);
    color:var(--light-accent);
    
}
.navbar-toggler{
    border-color: var(--main);
    background-color: var(--light)!important;
}
.navbar-toggler-icon{

}
.navbar{
    background-color: var(--light)!important;
    border-bottom: 0.4em solid var(--dark);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}

.nav-item a{
    color: var(--dark)!important;
    display: inline-block;

    margin-left:0.5em;
    margin-right:0.5em;

    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    --o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.nav-item a:hover, .nav-item a:focus, .nav-item a:active{

    background-color: var(--light-accent);
}
.navbar-brand{
    
}
.navbar-brand img{
    height: 2.5rem;
}
.nav-link{
    padding-right: .5rem;
    padding-left: .5rem;
    font-size: 1rem;
}
.navbar .urgence{
    color:var(--dark)!important;
}
.ico-menu, .ico-menu g ,.navbar .fa {
    fill: var(--main)!important;
    color: var(--main)!important;


    font-size:1.1rem;

    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    vertical-align: middle;

    overflow: inherit;

}
svg.ico-menu {
    margin-top: -0.4rem;
    height: 1.1rem;
    width: 1.1rem;
}
/** FIN PARAM NAV **/


/** PARAM MASTHEAD **/
.masthead{

    background-color: var(--dark);
    color: var(--light);
}
.masthead{
    padding: 4rem 1rem 1rem 1rem;
}
.cadre1{    
    border: 5px solid var(--main);

}
.cadre2{
    border: 2px solid var(--main);
    margin: 0.5rem;
    padding: 0.8rem;
}
.masthead-accroche{
    margin-top: 0.8rem;
}
.masthead .container{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content:center;
}
.mh-italic{
    font-size: 1.2rem;
    font-style: italic;
    
}
.masthead h3{

    font-weight: 400;
}

.masthead-accroche h4{
    font-weight: 400;
}
.mh-bold{
    font-weight: 700;
}


#logo-acceuil{

    height: 20em;
}
.img-accueil {
	padding-left: 2em;
    padding-right: 2em;

}
.masthead-accroche a{
    font-size: 1.4rem;
    color: var(--light);
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    --o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
.masthead-accroche a:hover, .masthead-accroche a:active,.masthead-accroche a:focus {
    color: var(--main);
}

.btn-col{
    display: flex;
}
.btn-rw{
    display:flex;
    flex-direction: column;
    
    margin-right: auto;
    margin-left: auto;
}

.btn-secondary {
    display: flex;

    align-content: flex-start;
    font-size: 1.2rem!important;
    font-weight: 400!important;
    background-color: var(--custom-white)!important;
    border: 0rem;
    border-radius: 0.1rem;
    color: var(--dark)!important;

    margin-top: 0.5rem;
    margin-bottom: 0.2rem;

    box-shadow: 0 6px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 6px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    --o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: var(--light-accent)!important;

    /* border-color: #302f2f !important; */
    
    
}

.btn-secondary i, .btn-secondary svg{

    align-self: center;
    margin-right: 0.4rem;
}

.ico-btn-sec, .ico-btn-sec g ,.ico-btn-sec .fa {
    fill: var(--main)!important;
    color: var(--main)!important;

    height: 1.1rem;
    width: auto;
    font-size:1.2rem;

    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    vertical-align: middle;

    overflow: inherit;

}
svg.ico-btn-sec {
 
    height: 1.5rem;
    width: auto;
}

/** FIN PARAM MASTHEAD **/


/** PARAM SECTION **/

.sec-etude{
    margin-top: 2.5rem;
}

.service{
    margin-top: 1rem;
}
.service .ico-service, .service .service-titre{
    align-self: center;

}
.service-titre{
    color: var(--main);;
}
.service-text{
    text-align: justify;
}
.content-section {
    padding-top:0;
    padding-bottom: 3rem;
}

.callout {
    padding-top: 0;
    padding-bottom: 3rem;

}


.text-faded {
    color: var(--dark);

}
.titre-section {
    display:flex;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    margin-bottom: 1.5rem;
}

.titre-section h2{
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1rem;
}

#portrait{
    color: #261911;
    height: 300px!important;
    margin-top: 15px;
}

.card-img-top{
    width: 4rem;
    margin-left: auto;
    margin-right: auto;
}

.comp-card {
    display: flex;
    flex-direction: column;
}
.comp-card .lead {
    padding-top: 10px;
}
.comp-card h6, .comp-card strong{
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 400!important;
}

.service h4{
    font-weight: 400;
}

.img_haut {
    margin-bottom: 1.4rem!important;
    width:600px;
}
#carte {
    margin-top: 4em;
    height: 20em;
    border-color: var(--main);
    border-width: 3px;
    border-radius: 0.3em;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 1px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
#carte a{
    font-size: 0.8rem;
}
.map{
    width: 37rem!important;
}

.ico-cb{
    width: 40px;
}
.row-ico-cb{
    justify-content: center;
    margin-bottom: 10px;
}
/** FIN PARAM SECTION **/


#linkedin-rw{
    margin-left: auto;
    margin-right: auto;
}

#linkedin{

    background-color: var(--dark);
    border-radius: 8px;

    padding: 4px 2px;

    display: inline-block;
    width: 3em;
    height: 3em;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    --o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;


}
#linkedin:hover, #linkedin:focus, #linkedin:active{background-color: var(--dark-accent);}


.linkedin-ico{
display: inline-block;
vertical-align: middle;

fill: var(--light);
width: 2.5em;
height: 2.5em;
padding-top: inherit;
}



.etu-para{

    display: flex;
    flex-flow: column;

   
    margin-top: 0.6rem;
}
.etu-para .lead{
    margin-top: 0.8rem;
    margin-bottom: 0rem;
}
.missions{
    background-color: var(--light-grey);

    padding: 0.8rem ;
}
.etu-para h6{
    font-size: 1.5rem;
    text-align: center;
}
.etu-para i{
    margin: auto;
}
.focus{
    background-color: var(--light);
    margin: 0.5rem;
    padding: 1.2rem;
}
.focus ul li{
    font-size: 1rem;
}
.ico-mission svg{
    fill: var(--main)!important;
    color: var(--main)!important;
    --dimension:2.5rem;

    width: var(--dimension);
    height: var(--dimension);
    font-size:var(--dimension);

    margin-right: 0.5rem;

    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    vertical-align: middle;

    overflow: inherit;

}
svg.ico-mission {
    --dimension:2.5rem;

    width: var(--dimension);
    height: var(--dimension);
}


.etu-para li{
    margin-top: 1.1rem;
    font-size: 1.1rem;
    text-align: justify;
}
.mg-tp-2{
    margin-top: 2rem;
}


@media (min-width: 768px) {  
    .h3, h3 {
        font-size: 2.1rem;
    }
    .navbar-nav {
        float:none;
        margin:0 auto;
        display: block;
        text-align: center;
    }

    .masthead{
        padding: 6rem 1rem 1rem 1rem;
    }
    #logo-acceuil{

        min-height: 20rem;
        height: 30vh;
    }
    
    .navbar-nav > li {
        display: inline-block;
        float:none;
    }
    .navbar-brand{
        margin-left: 5em;
   
    }
    .callout {
    
        background-size: contain;
    }

    .masthead h1 {
        font-size: 4.0rem;
    }

    .v-offset{
        height:5em;
    }

    .btn-rw{
    
        flex-direction: row;
        
        margin-right: auto;
        margin-left: auto;

        
    }
    .btn-rw a{
    
        flex-direction: row;
        
        margin-right: 0.4rem;
    margin-left: 0.4rem;

        
    }
    .masthead{
        padding: 6rem 1rem 1rem 1rem;
    }
    .cadre1{
        height: calc(100vh - 7rem);
    }
    .cadre2{

        margin: 0.5rem;
        height: calc(calc(100vh - 7rem) - 1.7rem);
    
    }

    

}

/* écran a faible hauteur*/
@media only screen and (min-width: 768px) and (max-height: 750px) {

.masthead img{
    min-height: unset!important;
    height: 30vh!important;

}
.masthead h3{
    font-size: 1.5rem!important;

}
.masthead h4{
    font-size: 1.1rem!important;

}
.masthead a{
    font-size: 0.9rem!important;

}
} 
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 
    .navbar-brand{
        margin-left: 5em;
        position: absolute;
    }

}