@charset "utf-8";
/* CSS Document */

/**
 * Cette feuille de styles gère XXXXX
 */
 
/*
==================================================
    Fonts
==================================================
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800&display=swap');

/**
 *
    font-family: 'Montserrat', sans-serif, Arial, 'Helvetica Neue', Helvetica, sans-serif; 
    font-weight: 400; - Regular 
    font-weight: 600; - Semi-bold 
    font-weight: 800; - Extrabold 
 */
 
/*
====================================================
    // Variables CSS
====================================================
*/
:root {
    /* Couleurs */
    --color-main:#00B6DC;
    --color-dark:#0790A9;
    --color-light:#70C7D7;
    --color-pastel:#DDEDF0;
    
    --focus-main:#FC7232;
    --focus-dark:#ED5920;
    
    --neutral-main:#646665;
    --neutral-dark:#524D4D;
    --neutral-light:#CCC;
    --neutral-pastel:#EEE;
    
    /* Font */
   --font-main:'Montserrat', sans-serif, Arial, 'Helvetica Neue', Helvetica, sans-serif;
   
   /* Couleurs */
    --radius-xs:.3rem;
    --radius-sm:.5rem;
    --radius-md:1rem;
    --radius-lg:5rem;
    --radius-xl:50%;
}

/*
==================================================
    Table of Contents / Sommaire
==================================================
    #Mobile (Portrait)  // 320px
    #Mobile (Landscape) // 576px
    #Tablet (Portrait)  // 768px
    #Tablet (Landscape) // 992px
    #Computer           // 1200px+ > 1250 avec scrollbar 
*/

/*
==================================================
    Mobile (Portrait)   // 320px
==================================================
    Pas besoin de déclarer de média queries
*/

* {
    transition: all .2s ease;
    outline: none !important;
}

::selection {
    background: var(--focus-main);
    color: #FFF;
}

.custom-file-label:lang(fr)::after {
    content: "Parcourir"
}

html, body {
    background-color: #FFF;
    padding-top: 0;
}

body {
    font-family: var(--font-main) !important;
    font-weight: 400;
    line-height: 1.6;
    text-shadow: none;
    color:var(--neutral-main);
}

a,
a:link,
a:visited {
    text-decoration: none;
    color:var(--focus-main);
}


/**/
b,
strong,
.strong {
    font-weight: 800 !important;
}

/**/
hr {
    border-top: 1px solid rgba(0, 0, 0, .25);
    width: 100%;
}

/* 
 * Conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding 
 */
img {
    height: auto;
    max-width:100%; /*Commenter pour régler le pb rencontré sur Gmap*/
}

/**
 * TITRAILLE
 */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6  {
    position: relative;
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
    color:var(--neutral-main);
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
.h1 strong,
.h2 strong,
.h3 strong,
.h4 strong,
.h5 strong,
.h6 strong {
    font-weight: 600 !important;
}

h1,
.h1 {
    font-size: 150%;
}

h2,
.h2 {
    padding-bottom: 1rem;
    font-size: 150%;
}

    h2:before,
    .h2:before {
        content:"";
        position: absolute;
        width: 130px;
        height: 1px;
        background: var(--neutral-main);
        bottom: 0;
        left:0;
    }
    
    h2.color-white:before,
    .h2.color-white:before {
        background: #FFF;
    }
    
    

h3,
.h3 {
    font-size: 130%;
    color:var(--color-main);
}

h4,
.h4 {
    
}

h5,
.h5 {
    
}

h6,
.h6 {
    
}
/**
 * HEADER
 */
header.container-fluid {
    position:fixed;
    text-align: center;
    background: #FFF;
    padding: .35rem 0;
    z-index: 1011;
}

header a.logo img {
    width: 120px;
}

/* Flèche permettant un scroll > content*/
.jumbotron .container {
    position: relative;
    padding: 0;
}

#slideDown {
    background: var(--color-main);
    color:#FFF;
    width:36px;
    height:36px;
    border-radius: 50%;
    position: absolute;
    right:0;
    bottom: 32px;
    z-index: 10;
    text-align: center;
    font-size: 2rem;
    line-height: 2.5rem;
}

/**
 * CONTENT MAIN
 */
.container-main {
    margin-top: 110px;
    padding-left: 0;
    padding-right: 0;
}

.container-main > .container {
    padding-left: 0;
    padding-right: 0;
}

/**
 * BREADCRUMB
 */
.breadcrumb {
    display:none;
    background: none;
}

.breadcrumb > span {
    margin-right: 5px;
}

.breadcrumb span,
.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited {
    color:var(--neutral-main);
}

.breadcrumb span:last-child a span:after {
    display:none;
}

/**
 * LISTING DCAT
 */
.listing > a {
    padding: 20px;
    display: block;
    background: var(--neutral-pastel);
    margin-top: 2rem;
}

.listing > a h2 {
    margin-bottom:.688rem
}

.listing > a h2:before {
    background: var(--focus-main);
    height: 5px;
    width: 60px;
}

/**
 * SCROLL TO TOP
 */
.topScroll {
    position: relative;
    color: #FFF !important;
    background:var(--color-dark);
    text-align: center;
    padding: 1rem 0;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    border-radius:50%;
    font-size: 1.313rem;
    line-height: 0;
    display:block;
}

/**
 * FOOTER
 */
 
/* Footer TOP */
#footerTop {
    background: var(--color-pastel);
    padding: 2rem 0;
    margin-top: 5rem;
}

#footerTop .h6 {
    color:var(--neutral-main);
}

/* Footer CONTENT */
#footerContent {
    background-color: var(--color-main);
    padding: 0 0 2rem;
    text-align: center;
}

#footerContent .h6{
    color:#FFF;
    display: inline-block;
    margin-bottom: 1rem;
    margin-top: 2rem;
    display: block;
}

#footerContent .btnSocial {
    background: #FFF;
    color:var(--color-main);
    border-radius: 50%;
    width:36px;
    height: 36px;
    text-align: center;
    line-height: 37px;
    margin-right: 2vw;
    transition: all ease .5s;
}

#footerContent #coord {
    color:rgba(255,255,255,.8);
}

/* Newsletter */
#footerNewsletter input {
    background-color: var(--color-dark);
    color:var(--color-pastel);
    font-size: .688rem;
    border:0;
    padding: 1.2rem .5rem;
}

#footerNewsletter .form-submit-inside {
        position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    width: 35px;
    border-radius: 0;
}

#footerNewsletter .form-submit-inside i {
    position: absolute;
    z-index: 100;
    height: 100%;
    line-height: 38px;
    width: 33px;
    text-align: center;
    right: 0;
}

#footerNewsletter .form-submit-inside input{
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    margin: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    border-radius: 0;
    background: transparent;
}

#footerNewsletter input[type="email"]::-webkit-input-placeholder,
#footerNewsletter input[type="email"]::placeholder {
    font-size: .688rem;
    color:var(--color-pastel) !important;
}

#footerNewsletter input[type=submit] {
    padding: 0;
}


#footerNewsletter label[for=rgpd],
#footerNewsletter label a {
    font-size: .688rem;
    color:#FFF;
    display: inline;
}

#footerNewsletter label a {
    text-decoration: underline;
}

/* Footer BOTTOM */
#footerBottom {
    background: var(--color-dark);
    padding: 1rem 0;
    box-shadow:0 7px 5px rgba(0,0,0,.2) inset;
}

#footerBottom * {
    color:#FFF;
    color:rgba(255,255,255,.75);
    font-size: 14px;
    font-size: .813rem;
}

/*
==================================================
    Mobile (Landscape)  // 576px
==================================================
*/
@media screen and (min-width: 576px) {


}/*/mediaquery*/


/*
==================================================
    Tablet (Portrait)   // 768px
==================================================
*/
@media screen and (min-width: 768px) {
/**
 * HEADER
 */
header.container-fluid {
    box-shadow:0 6px 20px rgba(0,0,0,.2);
    padding: 1rem 0;
    z-index: 11;
}

/**
 * BREADCRUMB
 */
.breadcrumb {
    display:block;
}


/**
 * JUMBOTRON
 */
.jumbotron {
    position:relative;
    height: 40vh;
    margin-bottom: 1rem;
    /*background-size: cover;*/
    /*background-attachment: fixed;*/
    transition: all ease 1s;
    padding-bottom: 0;
    overflow: hidden;
    /*background-image: url(/templates/masterA/design/responsivePublic/images/headerDefault.jpg);*/
}

.jumbotron:before {
    content: "";
    position: absolute;
    top:0;
    right:25%;
    bottom:0;
    left:0;
    z-index:1;
    background: rgb(0,182,220);
    background: linear-gradient(90deg, rgba(0,182,220,.6) 5%, rgba(0,212,255,0) 100%);
}

.jumbotron > img {
     position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 56%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    z-index: 0;
}

.dcontact .jumbotron {
    background-image: url(/templates/masterA/design/responsivePublic/images/headerContact.jpg);
}



/**/
.jumbotron .subtitle,
.jumbotron .title {
    position: relative;
    z-index: 10;
    color:#FFF;
    display: block;
    clear: both;
    margin-bottom: 0;
}

.jumbotron .subtitle {
    text-transform: uppercase;
    font-size: 2vw;
}

.jumbotron .title {
    width:60%;
    font-size: 3vw;
    line-height: 1.2;
    padding-bottom: 4vh;
    border-bottom: 20px solid var(--color-main);
}

/**/
header a.logo img {
    width: 150px;
}

/**
 * CONTENT MAIN
 */
.container-main {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Newsletter */
#footerNewsletter input {
    font-size: .813rem;
    padding-left:1rem; 
}


/**
 * SCROLL TO TOP
 */
.topScroll {
    display:none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    padding-top: .813rem;
}

/**
 * FOOTER
 */
 
/* Footer TOP */
#footerTop #certif {
    border-right: 1px solid var(--neutral-light);
}

/* Footer CONTENT */
#footerContent {
    text-align: left;
    padding-top: 2rem;
}

#footerContent .h6{
    margin-bottom: 2rem;
    margin-top: 0;
}

#footerContent .btnSocial {
    margin-right: 1vw;
}

/* Footer BOTTOM */
#footerBottom a {
    margin-right: 2vw;
}
}/*/mediaquery*/


/*
==================================================
    Tablet (Landscape)  // 992px
==================================================
*/
@media screen and (min-width: 992px) {
.jumbotron > img {
    max-width: 100%;
    left: 50%;
}

}/*/mediaquery*/


/*
==================================================
    Computer    // 1200px+ > 1250 avec scrollbar 
==================================================
*/
@media screen and (min-width: 1200px) {
a:hover {
    color:var(--color-main);
}
/**
 * JUMBOTRON
 */
.jumbotron .title {
    line-height: 1.05;
}
/**
 * FOOTER
 */
#footerContent .btnSocial:hover {
    transform:scale(1.05);
}

 /**/
#footerBottom a:hover {
    color:#FFF;
}
   

}/*/mediaquery*/