/* bleu #1d7cbc rgba(29,124,188,1);
bleu nouveau	 #298cc3 rgb(41, 140, 195)
.grisfonce{color: #333}  vert #a9f4d4*/ 

html {scroll-behavior: smooth;}
body{overflow-x: hidden;margin: 0;padding: 0}
*{font-family: 'Montserrat', sans-serif;}

.gris{color: #a6aaa8}
.bleu{color: #1d7cbc}
a,a:focus, a:hover a:visited{text-decoration: none !important;outline: none !important;cursor: pointer;}
a{color: var(--cbleu)}
a:focus, a:hover{color: var(--cbleu)}
.btn-outline-secondary:visited{color: #6c757d !important}
.btn-outline-secondary:hover{color: #fff !important}

#contact a,.inter a{color: var(--cbleu) !important}
.inter a{font-family: 'exo',serif;font-weight: 600}
#contact a:hover{color: #007bff}
::placeholder{color: #eee !important}
.fa-plus:hover,.fa-minus:hover{color: #1d7cbc}
.px-20{padding: 1rem 5rem}
.mt-20{margin-top: 5rem}
hr{width: 40%;background: none;margin: 0;padding-bottom: 2rem}
.w-90{width: 90%}
:root {
  --cbleu: rgb(41, 140, 195);  /* utilisation : var(--cbleu) */
  --cbrun: #c28449; /* utilisation : var(--cbrun) */
  }

.btn-outline-primary.active,.bg-primary,.btn-primary,.btn-outline-primary:hover,.badge-primary,.list-group-item.active{background:var(--cbleu) !important;border-color: var(--cbleu) !important;color:#fff !important}
.btn-outline-primary{border-color: var(--cbleu) !important;color: var(--cbleu) !important}
.text-primary {color: var(--cbleu) !important}


/* ***********  NAVBAR   **************** */
.navbar{padding: 2rem 1rem 2.5rem 5rem;z-index: 1000;box-shadow: 0 2px 4px #666;background: url('../media/papier.jpg');}
.navbar-small{padding: 0 1rem 0 5rem;z-index: 2000;background: rgba(61, 150, 215,.9);transition: all 0.5s ease;}

.navbar img{width: 220px;}
.navbar-small #logo-grand{display: none}
.navbar-small #logo-small{display: inline !important;width: 40px;margin-left: 2rem}

.navbar-nav{padding-top: 1rem;padding-left: 8rem}
.navbar-small .navbar-nav{padding-top: 0 !important;padding-left: 19rem !important}
.navbar .nav-item{padding-left: 1rem;}
.navbar .nav-link{color: #333 !important;font-size: 1rem;
	font-weight: 400;border-bottom: 2px solid transparent;}

.navbar-small .nav-link{color: #fff !important;}
.navbar .nav-link:hover,.navbar .nav-link.active{border-bottom: 2px solid #1d7cbc;}
.navbar-small .nav-link:hover,.navbar-small .nav-link.active{border-bottom: 2px solid #fff;}
.navbar .navbar-toggler{margin-top: 2rem}
.dropdown-menu{padding: 0 ;border:1px solid #1d7cbc;margin-top: .5rem;margin-left:.7rem }
.dropdown-item:hover {
  color: #fff;
  text-decoration: none;
  background-color: #1d7cbc;}
  
.navbar-small .dropdown-menu{background: rgba(29,124,188,.9);}
.navbar-small .dropdown-item{color: #fff}
.navbar-small .dropdown-item:hover {
  color: #333;
  background-color: #fff;}

/* ***********  INTRO   **************** */

.fond{background: url('../media/papier.jpg');}

#intro,.page{min-height: 92vh;padding: 0;margin: 0;z-index: 1000}
.page{padding: 0 5% 3rem 5%}
#boxvideo{height: 110vh;position: absolute;top: -20vh;z-index: 0;overflow-y: hidden;box-shadow: 0 2px 2px #ccc}
#video{ width: 100%;filter: brightness(100%);}
#acces{position: absolute;z-index: 1100;color: #333 ;right: 10px;top: 10px}

#slogan{position: relative; z-index: 1000;top: 15vh;width: 50%;margin-left: 15%;
	background: rgba(29,124,188,.6);padding: 2rem;color: #fff;font-size: 1.1rem;font-family: 'exo',serif;font-weight: 100
}
#slogan p{font-size: 1.8rem;font-weight: 200}
#cible{position: absolute;top: 80vh}


.ligne{height: .2rem;background: #1b91d2 ;width: 100%}

h1,h2{font-weight: 200;margin-bottom: 0;color: #333}

.soustitre{font-size: 1rem;text-align: center;color: #1d7cbc;font-weight: 600}
.col-lg-4 .inter{border-right: 1px solid #ccc}

.fa-building-o,.fa-users,.fa-user-circle-o{font-size: 16rem !important;color: rgba(0,0,0,.1);}
.encart{position: absolute ;top:8rem;left: 4rem;background: rgba(255,255,255,.90);padding: 1rem;font-size: 1.2rem;border: 2px solid #1d7cbc;border-radius: 1rem}
#accueil .col-lg-4 h4{text-decoration: underline;font-weight: 900;color: #666;margin-bottom: 0}
.col-lg-3{margin-top: 2rem}
#accueil .col-lg-3 img{width: 100%}
.col-lg-3 .inter:hover{border-bottom: 2px solid #1d7cbc;}
 .img-expertise{width: 80%;opacity: .3}
.institutionnels .col-lg-3{min-height: 200px}
#drop-area{border: 4px dashed #666;font-size: 1.6rem;text-align: center;border-radius: 1rem;cursor: pointer;margin-top: 2rem}
.drop-text{cursor: inherit;padding: 2rem;width: 100%}
.masque{opacity: .1;cursor: default !important}
.import span{font-size: 1.8rem;vertical-align: -5px;color: var(--cbleu);line-height: 1.5rem}
.btn-outline-primary:hover > span{color: #fff}
.drop-text span{vertical-align: -1px}
.progress{margin: .5rem}

#carte{height: 50vh;border-radius: .2rem;border-top: 1px solid #ccc}

.input-group-text{width: 120px;justify-content: flex-end}

#contact p{font-size: .9rem;line-height: 1.2rem}

#apropos .display-4.gris{text-align: center;padding-top: 3rem}
#apropos .display-4 .big{font-size: 5rem;color:#1d7cbc }

#apropos p{text-align: center;margin-bottom: 4rem}

.ovale{border-radius: 1.5rem;height: 150px}
.bloc-rond{position: relative;display: block; width: 250px;height:200px;margin: auto;}
.img-princ,.masque-img,.texte-rond,.texte-rond-masque{position: absolute;}
.img-princ{width: 100%; box-shadow: 0 0 1rem #666;opacity: .2}

.texte-rond,.texte-rond-masque{width: 100%; color: #666; font-size: 5rem;padding-top: 22%;line-height: 2.5rem;text-align: center
}
.texte-rond-masque{font-size: 2.2rem;opacity: 0;padding-top: 15%;}
#reco .texte-rond-masque{font-size: 1.7rem;}
.masque-img{ width:100%;opacity: 0;transition: .3s ease-in-out;}
.bloc-rond:hover>.masque-img{opacity: .6;transform: scale(1.1)}
.bloc-rond:hover>.texte-rond{opacity: 0}
.bloc-rond:hover>.texte-rond-masque{opacity: 1;color: #fff}

#metier .col-lg-3{padding: 1.8rem;
 }
#metier .col-lg-3 img{width: 100%;opacity: .2;}
.bloc-metier-b{background: rgba(29,124,188,.05)}
.bloc-metier-m{background: rgba(170,110,60,.05)}
.bloc-metier-v{background: rgba(116,197,103,.05)}
.bloc-metier-r{background: rgba(239,100,100,.05)}
.mr-10{margin-right: 10rem;padding: 2rem}
.texte-metier{position: absolute;font-size: 1.8rem;padding: 3rem 0 0 2rem ;font-weight: 800;color: #555;transition: 1s ease-in-out;top:2rem}

/* #metier .col-lg-3:hover{ animation-duration: .5s;animation-name: vibre; */
#metier .col-lg-3:hover .texte-metier{transform: scale(1.2);}

@keyframes vibre {
 
  25% {
    transform: rotateZ(1deg);
  }
  
   50% {
    transform: rotateZ(-2deg);
  }
  75% {
    transform: rotateZ(2deg);
  }
  100% {
    transform: rotateZ(-1deg);
  }
}

.decale-center{padding-left: 20rem}
.unpeu-center{padding-left: 16rem}
#metier h3 img{width: 30px;vertical-align:0}
.gras{font-weight: 900;letter-spacing: 1px}
.degradeb{background:  linear-gradient(to right ,  rgba(29,124,188,.05) , transparent);padding: .1rem 1rem;color: #000;font-size: 1.2rem}
.degradeb i,.degradev i,.degradem i,ul li i,h4.mt-5 i{color: #999;cursor: pointer;padding-top: 5px;font-size: 16px}

.degradem{background:  linear-gradient(to right ,  rgba(170,110,60,.05) , transparent);padding: .1rem 1rem;color: #000;font-size: 1.2rem}

.degrader{background:  linear-gradient(to right ,  rgba(239,100,100,.1) , transparent);padding: .1rem 1rem;color: #000;font-size: 1.2rem}

.degradev{background:  linear-gradient(to right ,  rgba(116,197,103,.1) , transparent);padding: .1rem 1rem;color: #000;font-size: 1.2rem}
ul p{font-weight: 600}
/* ul li{margin-bottom: 1rem;padding-right: 1rem} */
.semi-gras{font-weight: 700;}
#valeurs img{width: 100%;}
#valeurs .col-lg-4 img{opacity: .08}
.valeurs-b{position: absolute;width: 92%;height: 100%;background: rgba(29,124,188,.05);top:0;left: 4%;box-shadow: 0 0 1px rgba(29,124,188,.3)}
.valeurs-m{position: absolute;width: 92%;height: 100%;background: rgba(214,206,76,.05);top:0;left: 4%;box-shadow: 0 0 1px  rgba(214,206,76,.3)}
.valeurs-v{position: absolute;width: 92%;height: 100%;background: rgba(116,197,103,.05);top:0;left: 4%;box-shadow: 0 0 1px rgba(116,197,103,.3)}

.valeurs-b p,.valeurs-m p,.valeurs-v p{font-size: 1.2rem}

#espace-client .col-lg-3,#metier .col-lg-3{text-align: center}

#espace-client .soustitre{padding-top: 6rem}

#espace-client h1{font-weight: 300;color:#298cc3 }

#espace-client .col-lg-3 a,#metier .col-lg-3 a{box-shadow: 0 2px 4px #ccc;display: block;
	border-radius: 1rem;position: relative;width: 280px;height: 240px;margin: auto;
background: 	rgba(61, 150, 215,.9)
	}
#espace-client .col-lg-3 a:hover,#metier .col-lg-3 a:hover{box-shadow: 0 2px 8px #999;}

#metier .texte-box{position: absolute;z-index: 0;height: 100%;width: 100%;text-align: center;
	color: #fff;top: 1rem;font-size: 1.5rem;line-height: 1.8rem;padding: 0 .5rem}
#metier .texte-box p{font-size: 1rem;line-height: 1.5rem}
#espace-client .texte-box{position: absolute;z-index: 0;height: 100%;width: 100%;text-align: center;
	color: #fff;top: 2.5rem;font-size: 1.8rem;line-height: 2.5rem}
#espace-client .fa-2x{font-size: 10rem;color:rgba(0,0,0,.1);}
#espace-client .col-lg-3 img,#metier .col-lg-3 img{width: 100%;opacity: .01}
#espace-client h5 i{font-size: 3rem}
.ferme-ml{position: fixed;top:1rem;right: 1rem;cursor: pointer;color: #666}
.ferme-ml:hover{color: #1d7cbc}


.news__cont{min-height: 200px;background: rgba(29,124,188,.5);padding: .5rem}
.news__cont h4{font-size: 1rem}
.news__cont p{font-size: .8rem}
.news__post{margin-bottom:3rem;}
.pagination-block{display: none}
.news__img{background-size: cover;}
.news__inr{margin: 1rem;border-bottom: 1px solid #ccc}
.lnk-btn{position: absolute;bottom: 20px}
.news__cont span{position: absolute;bottom: 20px;right: 35px}
.lnk-btn a,.news__cont span{color: #333;font-style: italic;font-size: .8rem}
.page-link{color: #666}
.page-item.active .page-link{background: #1d7cbc;border-color:#1d7cbc; }

#modal-actu .paragraph,#modal-actu .intro{padding-left: 1rem;}
#modal-actu h1{font-size: 1.8rem;margin-top: 2rem;margin-bottom: 2rem;font-weight: 400}
#modal-actu h3{font-size: 1.4rem; text-decoration: underline;margin-top: 1rem;font-weight: 600}
#mentions .logo,.modal .logo{width: 150px;}

footer{background: #298cc3;text-align: center;color: #fff;font-weight: 300}
footer img{width: 40%}
footer .fond.py-2{border-radius: .8rem}
footer a,footer h3{color: #fff}
footer h3{font-style: italic;font-weight: 300}
footer hr{border-top: 1px solid #fff;margin-left: 30%}
footer a:focus, footer a:hover{color: #333}
footer .legal{color: #fff;font-size: 1rem;margin: 1rem 0;border-bottom: 1px solid #ddd;border-top: 1px solid #ddd}
footer span{font-size: 2.5rem;margin-right: .5rem;line-height: .5rem;vertical-align: -5px}
.fontawesome {
  font-family: "FontAwesome", sans-serif;
  font-weight: 900;
}
.fa-5x{font-weight: 100;color: #6095b9;filter: drop-shadow(1px 2px 2px #ccc);margin-top: 2rem}

.fa-arrow-circle-right,.fa-upload{color: #1d7cbc}


#alertjs{position:fixed;top:-100px;width: 768px;z-index: 2000;left: 50%;
transform: translateX(-50%);}

#mentions h5{margin-top: 2rem;text-decoration: underline}
#mentions p{margin-bottom: 0}


/* ***********  TOOLTIP   **************** */


.tooltip{z-index: 2000}

.tooltip.show{opacity: .98}
.tooltip-inner {max-width: 500px;
    background-color: #1d7cbc;
    color: #fff;font-weight: 400;border: 2px solid #016dac;
   
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: #016dac;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    border-right-color: #016dac;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #016dac;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: #016dac;
}




/*  fleche tooptip */
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #016dac;
 
}



/* ***********  RESPONSIVE ************* */

@media (max-width: 1080px) {

.navbar-nav {
  padding-left: 3rem;
}
}


@media (max-width: 992px) {
	
	#navbar-top{padding:1rem 1rem 2.5rem 1rem;}
	.navbar-small{padding: 0 !important;}
	.navbar-small .navbar-toggler {margin: .5rem;}
	.navbar img{width: 180px;}
	.navbar-nav{padding-top: 1rem;padding-left: 0;text-align: center;}
	.navbar-small .navbar-nav{padding-left: 0 !important}
	.nav-item{padding-left: 0;}
	#slogan{top: 8vh;width: 90%;margin-left: 5%;
	padding: 1rem;font-size: 1rem;}
	.mt-20{margin-top: 2rem}
	h1{font-size: 28px}
	.mt-5{margin-top: 1rem !important}
	#apropos .display-4.gris{font-size: 1rem}
	#apropos .display-4 .big{font-size: 2rem}
	#apropos p{font-size: .8rem}
	#apropos-info .col-6{margin-bottom: 2rem}
	.inter img{width: 80% !important}
	.bloc-rond{width: 150px;height:150px;}
	.texte-rond,.texte-rond-masque{ font-size: 2.5rem;padding-top: 34%;}
	.texte-rond-masque{font-size: 1.4rem;padding-top: 20%;}
	#reco .texte-rond-masque{font-size: 1rem;}
	.texte-metier{font-size: 1.2rem;padding: 1.5rem 0 0 .5rem ;}
	footer img{width: 100%}
}




@-moz-document url-prefix() { 
  nav{font-weight:normal;}
}