@charset "utf-8";

/* CSS Document */

/* Dans ce fichier ne doit être présent que la mise en forme générale du site ainsi que la mise en forme dans les zones spécifiques */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular/Montserrat-Regular.eot');
    src: url('../fonts/Montserrat-Regular/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Regular/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular/Montserrat-Regular.woff') format('woff'),
        url('../fonts/Montserrat-Regular/Montserrat-Regular.ttf') format('truetype'),
        url('../fonts/Montserrat-Regular/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold/Montserrat-SemiBold.eot');
    src: url('../fonts/Montserrat-SemiBold/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-SemiBold/Montserrat-SemiBold.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBold/Montserrat-SemiBold.woff') format('woff'),
        url('../fonts/Montserrat-SemiBold/Montserrat-SemiBold.ttf') format('truetype'),
        url('../fonts/Montserrat-SemiBold/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold/Montserrat-Bold.eot');
    src: url('../fonts/Montserrat-Bold/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Bold/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold/Montserrat-Bold.woff') format('woff'),
        url('../fonts/Montserrat-Bold/Montserrat-Bold.ttf') format('truetype'),
        url('../fonts/Montserrat-Bold/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/* *{font-family: 'Raleway', sans-serif;} */
body {margin:0; padding:0; font-family: 'Montserrat', sans-serif; font-size:16px; background:#fff; color:#000;}
strong {font-weight:700;}
.noscroll {  overflow: hidden; height: 100%; width:100%;}

body.mfp-open {height:100%; overflow:hidden;}
body.mfp-open .mfp-wrap {}
body.popin-open .mfp-wrap { overflow:hidden !important;/*height: 100% !important;*/  position: /*static*/fixed;}

body.showLayout {overflow: hidden !important; height: 100% !important; width:100% !important;}
body.showLayout #modal-layout {  width: 100%;  height: 100%;  position: fixed;  left: 0px;  top: 0px;  z-index: 3001;  display: block; background: rgba(0,0,0,0.6);}

.layout {background:rgba(115,115,115,0.5); width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:100; display:none;}
.layout.visible {display:block;}

/* POPUP */
.mfp-bg {z-index:3250 !important;}
.mfp-wrap, .mfp-content {z-index:3300 !important;}
.mfp-bg {background:#262818 !important; opacity: 0.6 !important;}
.mfp-close-btn-in .mfp-close {color: #000; font-size: 45px;}
.white-popup {position: relative;  background: #FFF; overflow-y:auto; padding: 20px 10px; width: auto; max-width: 590px;  max-height:885px; min-height: 160px; margin: 50px auto; border-radius: 5px; }

/* FIN POPUP */

#global {padding-top:0px;}
.global {max-width:1570px; padding:0 10px; margin:0 auto;}
#global h1 {color:#293C8D;}
#global a,
#global a:visited {color:#63b44b;}
#global p,
#global ul li > div,
#global ol li > div {  line-height: 24px;}
#global ul li,
#global ol li {margin: 5px 0;}
/* BANDEAU */

#bandeau {padding:0; width:100%; height:165px;}
#bandeau-conteneur {position: relative; z-index: 400;  width:100%; height: 100%;}
/* Elements du bandeau */
#bandeau-contact {position:relative; z-index:40; height:100%;}
#bandeau-contact .global {  position:relative; z-index:40; padding:20px 10px 0;  height:100%; box-sizing:border-box; display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}

#bandeau #logo {display:block;position:relative; z-index:10; width:295px;margin: 0 auto;}
#bandeau #logo a,
#bandeau #logo a:visited {display:block;}
#bandeau #logo a img {display:block; height:auto; width:100%; margin: 0 auto;}

#bandeau #bandeau-reseaux {text-align:center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end;-ms-flex-align: end;align-items: flex-end; }
#bandeau #bandeau-reseaux span {font-size:15px; color: #3b3c40; padding-right: 75px; position: relative; text-transform:uppercase;}
#bandeau #bandeau-reseaux span::after { content: "";  background: #666;  width: 70px; height: 1px;  position: absolute;  right: 0;  bottom: 5px;}
#bandeau #bandeau-reseaux .bandeau-social { margin: 0 5px; height: 18px;} 
#bandeau #bandeau-reseaux .bandeau-social a,
#bandeau #bandeau-reseaux .bandeau-social a:visited {text-align:center; color:#2c3b89; text-decoration:none; height: 100%; display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
#bandeau #bandeau-reseaux .bandeau-social i {color:#2c3b89; font-size: 17px; }
#bandeau #bandeau-reseaux .bandeau-social i.fa-facebook-f {font-size:15px;} 

#bandeau-telephone a,
#bandeau-telephone a:visited { text-decoration:none; color:#fff; font-weight:600; background:#2c3b89; height:35px; padding:2px 40px; border-radius: 30px; box-sizing:border-box; display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} 
#bandeau-telephone i {background:url(../images/icone-tel.png) no-repeat center center; width:10px; height:22px; margin-right:10px; display:block;}
#bandeau-telephone span {font-size:18px;}


#bande-haut {background:#2c3b89; font-size:16px; color:#fff; min-height:40px; line-height: 18px;}
#bande-haut .global {text-align:center; height:100%; min-height:40px; padding: 1px 10px; box-sizing: border-box; display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} 

#centre {padding: 0; }

#centre .global {}
#centre .contenu-wrapper {padding:0px; min-height:400px; position:relative;}

/* PAVES */
#accueil-paves-conteneur {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#accueil-paves-conteneur .accueil-pave {width: 33.333%; margin:0px; height: 750px; position: relative; cursor:pointer; padding: 0 50px 130px; box-sizing: border-box; }
#accueil-paves-conteneur .accueil-pave-conteneur {width: 100%; height:100%; display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
#accueil-paves-conteneur .accueil-pave-image {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
#accueil-paves-conteneur .accueil-pave .accueil-pave-image::after { z-index: 2; position:absolute; left:0; top: 0; width: 100%;height: 100%; mix-blend-mode: multiply; display:block; content:"";}
#accueil-paves-conteneur #accueil-pave-0 .accueil-pave-image::after {background:rgba(255, 186, 0, 0.4);}
#accueil-paves-conteneur #accueil-pave-1 .accueil-pave-image::after {background:rgba(35, 180, 87, 0.4);}
#accueil-paves-conteneur #accueil-pave-2 .accueil-pave-image::after {background:rgba(112, 205, 255, 0.4);}
#accueil-paves-conteneur .accueil-pave-image img {width: 100%; height: 100%; object-fit: cover; }

#accueil-paves-conteneur .accueil-pave .container {box-sizing: border-box; cursor:pointer; width: 409px; height:auto; max-height: 221px; position: relative; z-index: 3; text-align: center; border-radius: 5px; overflow:hidden; display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
#accueil-paves-conteneur .accueil-pave .container img {width: 100%; height: 100%; object-fit: contain; border-radius: 5px;}
#accueil-paves-conteneur .accueil-pave .container img.hover {display:none;}
#accueil-paves-conteneur .accueil-pave .container::after {content:""; display:block;  height:17px; width:0; position: absolute; bottom: 0; left: 0; z-index: 5; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
#accueil-paves-conteneur #accueil-pave-0 .container::after {background:#ffba00;}
#accueil-paves-conteneur #accueil-pave-1 .container::after {background:#23b457;}
#accueil-paves-conteneur #accueil-pave-2 .container::after {background:#70cdff;}

#accueil-paves-conteneur .accueil-pave:hover .container::after {width:100%;}
#accueil-paves-conteneur .accueil-pave:hover .container img {display:none;}
#accueil-paves-conteneur .accueil-pave:hover .container img.hover {display:block;}


#accueil-conteneur {padding: 20px 0;}	
#contenu #accueil-conteneur .accueil-titre h1 {
	text-align:center;
	display:-webkit-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	margin: 15px 0;

}
#contenu #accueil-conteneur .accueil-titre h1 strong {
	font-weight:600
}
#accueil-conteneur #accueil-texte-contenu {
	overflow:hidden;
	display:grid;
	grid-template-rows:0fr;
	overflow:hidden;
	transition:grid-template-rows 200ms
}
#accueil-conteneur #accueil-texte-contenu.active {
	grid-template-rows:1fr
}
#accueil-conteneur #accueil-texte-contenu>div {
	min-height:0
}
#accueil-texte-bouton span {text-align: center; font-weight: 700; font-size: 19px; cursor:pointer;}
#accueil-texte-bouton .voir {display:block;}
#accueil-texte-bouton .masque {display:none;}
#accueil-texte-bouton.visible {}
#accueil-texte-bouton.visible .voir {display:none;}
#accueil-texte-bouton.visible .masque {display:block;}

#pied {  margin-top: 0px;  background: #fff;}
#pied .global {padding:50px 10px 90px; }


#pied #logo-pied {width:100%; max-width:295px; position:relative; margin:0 auto;}
#pied #logo-pied a,
#pied #logo-pied a:visited {text-decoration:none; color:#000;}
#pied #logo-pied a img {vertical-align:top; height:auto; width:100%;}

#pied #pied-reseaux {text-align:center; margin-top:20px; display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
#pied #pied-reseaux .pied-social { margin: 10px;} 
#pied #pied-reseaux .pied-social a,
#pied #pied-reseaux .pied-social a:visited {position:relative; text-align:center; color:#fff; text-decoration:none;  width:35px; height:35px; background: #2a3a88; display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s; -moz-transition: -moz-transform ease-out 0.1s, background 0.2s; transition: transform ease-out 0.1s, background 0.2s; border-radius: 28px; }
#pied #pied-reseaux .pied-social a::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; content: ''; border-radius: 50%; z-index: -1;  opacity: 0; -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);-webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);-o-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); -webkit-transform: scale(0.9); -moz-transform: scale(0.9);   -ms-transform: scale(0.9);  transform: scale(0.9);}
#pied #pied-reseaux .pied-social i {color:#fff; font-size: 19px;}
#pied #pied-reseaux .pied-social i.fa-facebook-f { font-size: 20px;}
#pied #pied-reseaux .pied-social a:hover {background: #ffffff; -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93);transform: scale(0.93);}
#pied #pied-reseaux .pied-social a:hover i { color:#2a3a88;}
#pied #pied-reseaux .pied-social a:hover::after {-webkit-animation: sonarEffect 1.3s ease-out 75ms;  -moz-animation: sonarEffect 1.3s ease-out 75ms;  animation: sonarEffect 1.3s ease-out 75ms;}

@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #2a3a88, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #2a3a88, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #2a3a88, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #2a3a88, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -moz-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #2a3a88, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #2a3a88, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}


/* Retour haut de page */
#back-to-top { position: fixed; bottom: 25px; right: 25px; border:none; text-decoration: none; background: rgba(44, 59, 137, 0.9); color:#fff; width:48px; height:48px; padding: 0; display: none;	z-index:500; border-radius: 35px; }
#back-to-top span { margin:1px; width:calc(100% - 2px); height:calc(100% - 2px); background: rgba(44, 59, 137, 0.9); border: 3px solid #fff; border-radius: 35px; box-sizing: border-box;  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#back-to-top i {color:#fff; font-size: 32px; line-height: 39px; width:100%; height:100%; text-align:center; }


/* MODULE AUTHENTIFICATION */
#authentification {}
#authentification .authentification-conteneur {max-width:400px;  width:calc(100% - 32px); padding:15px; border:1px solid #ccc; margin:0 auto;}
#authentification .form {margin:10px 0; font-size:0;}
#authentification .form .form140 {width:105px; font-size:15px; float: none;display: inline-block; vertical-align:middle;}
#authentification .form .input-text {width:calc(100% - 145px); display: inline-block; vertical-align:middle;}
#authentification .form .bouton {margin:30px auto 0; display:block;}
#authentification-motdepasse-oublie {font-size:13px; text-align: right;}

/* MAINTENANCE */
#maintenance-totale { width:100%; margin:0 auto; }
#maintenance-totale #authentification .authentification-conteneur {margin: 15px auto;}
#maintenance-totale #centre {height:100%;}
#maintenance-totale #centre .global {max-width:960px; height:100%;}
#maintenance-totale #centre .global #contenu {height:calc(100% - 50px); padding: 25px 0; display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
#maintenance-totale #centre .global #contenu h2.maintenance {text-align:center;}
#maintenance-totale #centre .global #contenu p {margin-top:7px; margin-bottom:7px;}
#maintenance-totale #centre .global #contenu img {max-width:100%; height:auto;}
#maintenance-totale #maintenance-submit {}

/* Cookie message */
#cookie-message {position:fixed; bottom:20px; left:20px; z-index:9999; background:rgba(0,0,0,0.8); width:calc(100% - 40px); max-width:680px; border-radius:3px;}
#cookie-message-wrapper {padding:20px 45px 20px 20px;}
#cookie-message-entete { overflow:hidden; text-align:right; position:absolute; top:2px; right:9px; z-index:100;}
#cookie-message-fermer {color: #fff; font-size: 30px; line-height: 30px; text-decoration: none;}
#cookie-message-contenu {color:#ffffff;}
#cookie-message-contenu a,
#cookie-message-contenu a:visited {color:#ffffff;}
#cookie-message-contenu p {margin:0;}

#cookie-choix-contenu {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
#cookie-choix-contenu .cookie-choix {-webkit-box-align: center;align-items: center;background-color: #fff;border: none;cursor: pointer;display: -webkit-inline-box;display: inline-flex;-webkit-box-pack: center;justify-content: center;width: 110px;padding: 10px;position: relative;text-decoration: none;-webkit-transition: background-color .3s ease;transition: background-color .3s ease;background: none;color: #fff;text-transform: uppercase;}
#cookie-choix-contenu .cookie-choix a{text-decoration: none;}
#cookie-choix-contenu .cookie-choix span{letter-spacing: 1px;color: #fff;display: block; font-size: 13px;font-weight: 700;line-height: 1.23;pointer-events: none;position: relative;text-align: center;-webkit-transition: color .3s ease;transition: color .3s ease;z-index: 1;}
#cookie-choix-contenu .cookie-choix::before {background-color: #000; bottom: 0;content: "";display: block;left: 0;position: absolute;top: 0;-webkit-transition: width .3s ease;transition: width .3s ease;width: 0;}
#cookie-choix-contenu .cookie-choix:hover::before {width: 100%;}

.popup-modal-close {display: flex; justify-content: flex-end;margin-bottom:20px;}

/* Cookie consentement modal debut */
#cookie-consent-form {}
#cookie-consent-form > .titre {font-size:18px; text-transform:uppercase;}
#cookie-consent-form .categories {}
#cookie-consent-form .categorie {padding:15px 0; border-top:1px solid #ccc;}
#cookie-consent-form .categorie:first-child {border-top:none;}

#cookie-consent-form .categorie .haut {}
#cookie-consent-form .categorie .titre {font-weight:bold; margin-bottom:15px; display:inline-block; vertical-align:top; width:250px;}
#cookie-consent-form .categorie .configuration {color:#2196F3; display:inline-block; vertical-align:top; width:calc(100% - 260px); text-align:right;}
#cookie-consent-form .categorie .configuration.actif {font-weight:bold;}

#cookie-consent-form .categorie .contenu {}
#cookie-consent-form .categorie .contenu > div { border-bottom: 1px solid #ccc;}
#cookie-consent-form .categorie .row {margin:10px 0; font-size:0.9em;}
#cookie-consent-form .categorie .label {display:inline-block; vertical-align:top; width:120px; font-weight:bold;}
#cookie-consent-form .categorie .valeur {display:inline-block; vertical-align:top; width:calc(100% - 120px);}

#cookie-consent-form .categorie .nom {}
#cookie-consent-form .categorie .description {}

 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 

/* Cookie consentement modal fin */