@charset "utf-8";
/* CSS Document */
:root {
	--nav-bk : #f6ddc8; 
	--navbar-bk:rgba(255,255,255,0);
	--dropdown-bk:rgba(84,163,175,0.3);
	--dropdown-bkh:rgba(84,163,175,0.5);
	--dropdown-br : 0px solid --dropdown-bk;
	--dropdown-color:#ffffff;
	--dropdown-item-c:rgba(84,163,175,1);
	--nav-link-c:#212121;
	--nav-link-h:#f15827;
	--nav-link-f:#f15827;
	--nav-link-a:#f15827;
	
}
.nav{background-color:var(--nav-bk);position:relative;top:0px;z-index:2;}

.info{background-color:#fcfcfc;border-color:#e1e1e1; border-width:0 0 1px 0;border-style:solid;}
.info .dte{align-items: center;display: flex;align-content: end;justify-content: flex-end;}
.amailto{ width: 2em;height: 2em;display:flex;background-image:url(../img/mail.svg);background-position:center;background-repeat:no-repeat;opacity:1;}
.amailto:hover{background-color:var(--soho)}

.dropdown-menu {font-size: 13px;background-color:var(--dropdown-bk);border:var(--dropdown-br);}
.dropdown-item{color:var(--dropdown-color);background-color:var(--dropdown-bk);}
.dropdown-item:hover{background-color:var(--dropdown-item-c);}
@media (max-width:767px){
	.container-fluid.nav-fond{padding-right: var(--bs-gutter-x, 0);padding-left: var(--bs-gutter-x, 0);background-color:var(--bs-white);}
	.connexion{display:block;width:100%;}
	.connexion a{width:100%;text-align:center;margin-bottom:15px;}
	.menu3{display:block;width:65%;}
	.menu3 a{ width:25%;text-align:center;height:50px;line-height:50px;}
	.navbar-brand{margin-right:0;}
	.us{background-color:var(--w-bouton)}
	.me{background-color:var(--w-boutonup)}
	.agence{background-color:var(--bs-gray-500)}
	.planning{background-color:var(--w-boutonup)}
	.us:before ,
	.me:before ,
	.agence:before ,
	.planning:before ,.planning:before {color:#fff;}
	.us span,
	.me span,
	.planning span{transform: translate(10px,-35px);opacity: 0.9;color:#fff;}
	.agence span	{transform: translate(10px,-35px);opacity: 0.9;color:#000;}
	.us:hover ,
	.me:hover ,
	.planning:hover ,
	.agence:hover{background-color:var(--w-bg-btnup)}
	.us:hover span,
	.me:hover span,
	.planning:hover span,
	.agence:hover span{transform: translate(10px,-35px);opacity: 1;color:#fff;}
	.navbar-collapse{padding-left:0;}
	.dropdown-menu{display:block;padding:0 0 0 15px;background-color:transparent;border-width:0;}
	.dropdown-item { font-size: 1em;}
}
@media (min-width:10px){
	.brand{
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		width:100%;
	}
	.navbar-toggler:focus{box-shadow: 0 0 0 0rem;}
	body.home .brand {width: 100%;padding-right:0px;}
	.menu{
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		width:100%}
	.navbar{background-color:var(--navbar-bk);padding-top: 1rem !important;padding-bottom: 1rem !important;}
	body.home .menu .navbar {display:none;}
	.toggle { display:block; position:fixed; top:15px; right:10px; z-index:2000;width:120px;border: 0;background-color: transparent;}
	.toggle:focus{}
	.hb {width:100%;margin: 0 auto;display: block;}
	#navbar-page{
		position: fixed;top:-2500px;right:0; 
		width: 80%;
		z-index:100;
		padding-top:80px;
		padding-left:50px;
		padding-bottom:100px;
		/*transform:translate(0,2500px);*/
		transition: all 0.3s ease;
		background-color:#f2f2f2;
	}
	#navbar-page.sorti{
		position: absolute;
		top:0;;
		/*transform:translate(0,0);*/
		transition: all 0.5s ease;
	}
	.navbar-brand{
		transform:translate(0,0) scale(1,1);
		transition: transform 0.6s ease;
	}
	.navbar-brand.sorti{
		transform:translate(-40%,0) scale(0.5,0.5);
		transition: transform 0.3s ease;
	}
	.navbar-page .navbar-nav  li{width:100%;}
	.navbar-page .navbar-nav  .nav-link{color:#4f4a4a;font-size:13px;padding-left:5px;transition: all 0.3s ease;}
	.navbar-page .navbar-nav  .nav-link:hover{padding-left:10px;transition: all 0.3s ease;}
	.navbar-page .navbar-nav .dropdown-menu{display:flex;flex-direction:row;background-color:transparent;font-size:1.5rem;padding-left:50px;color:#4f4a4a;;transition: all 0.3s ease;
	width:50%;border-width: 2px 0 0 0;
	border-color: var(--bs-red);
	}
	.navbar-page .navbar-nav .dropdown::after {display: none;}
	.navbar-page .navbar-nav .dropdown-item{color:#4f4a4a;}
	.navbar-page .navbar-nav .dropdown-item:hover{background-color:transparent;transform:translate(-5px,0) ;transition: all 0.9s ease;position:relative;}
	.navbar-nav .nav-link{color:#4f4a4a;}
	.navbar-nav .nav-link:hover{color:var(--nav-link-h)}
	.navbar-nav .nav-link:focus{color:var(--nav-link-f)}
	.navbar-nav .nav-link:active{color:var(--nav-link-a)}
	.navbar-nav .active .nav-link{color:var(--nav-link-a)}
	.navbar-page .navbar-nav .dropdown-menu .dropdown-menu {display:flex;flex-direction:column;border-width:0 0 0 0;}
	
	.col-12.px-4{
	padding-right: 0rem !important;
	padding-left: 0!important;
	}
	ul{
		padding-left: 1rem;
	}
}
@media (min-width:500px){
	.toggle {width:120px;}
}
@media (min-width:10px){
	.menu{display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;

		justify-content: center !important;
	}
}
@media (max-width:767px){
	#navbars{padding-left:30px;padding-right:30px;padding-top: 5px;}
	.navbar-light .navbar-nav .nav-link{display:block;padding-left:30px;line-height:50px;margin-right: 0px;}
	.dropdown-item{line-height:50px;color:#000;}
	.dropdown-menu{padding: 0 0 0 0;}
	.dropdown{border:2px solid var(--ch-blue);margin-bottom:10px;}

	.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link{
		/*color: var(--dropdown-color);*/
		/*background-color: var(--dropdown-bk);*/
		background-color: var(--dropdown-bk);
		color:#000;
	}
	.navbar-light .navbar-nav .nav-link.niv01 , .navbar-light .navbar-nav .nav-link.niv01{background-color: var(--dropdown-bkh);color:#000;}
	.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus{background-color: var(--dropdown-bkh);}
	
}
@media (min-width:767px){
	.brand{width:45%;padding-right:1rem;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start!important;
		padding-right:0;
		padding-left:0;
	}
	.menu{
		justify-content: flex-start!important;
	}
	.navbar-brand {margin-right:0;}
	.connexion{padding-bottom:10px}

}
@media (min-width:768px){
	.menu2{position:absolute; top:20px ;right:5%;width:20%}
}
@media (min-width:800px){
	.brand{width:45%;padding-right:1rem;}
	.menu{width:55%;}
	.navbar-brand {margin-right:0;}
	.connexion{padding-bottom:10px}
	.dropdown-menu.show{}
	.dropdown-submenu{}
	
	.dropdown.open .dropdown-menu.show {display: flex !important;flex-direction: column;}
	.dropdown.open .dropdown-menu.show .dropdown-item{}
	.dropdown.open .dropdown-menu.show .dropdown-menu{display:block;position:relative;display: flex !important;flex-direction: column;}
	.menu2 {
  position: absolute;
  top: 20px;
  right: 5%;
  width: 20%;
  justify-content: center !important;
  flex-wrap: wrap !important;
  display: flex !important;
    flex: 0 0 auto;
}
}
@media (min-width:900px){
	.brand{width:45%;}
	#logo{padding-left:0px;}
	#logo img{}
	.navbar-brand {margin-right:0;}
	#logo #espace_affaires{max-width:90%;width:90%}
	.connexion{padding-bottom:0px;margin-right:20px;}
	.menu2 {
  position: absolute;
  top: 20px;
  right: 5%;
  width: 20%;
}
}
@media (min-width:1000px){
	.brand{width:45%;padding-right:1rem;}
	.menu{width:50%}
	.menu2{width:25%;}
	.navbar-brand {margin-right:0;}
	#logo #espace_affaires{max-width:90%;width:90%}
}
@media (min-width:1024px){
	.brand{width:45%;padding-right:1rem;}
	.navbar-brand {margin-right:0;}
	#logo #espace_affaires{max-width:90%;width:90%}
}
@media (min-width:1100px){
	.brand{width:45%;}
	.navbar-brand {margin-right:0;}
	#logo #espace_affaires{max-width:90%;width:90%}
}
@media (min-width:1200px){
	.brand{width:45%;}
	.navbar-brand {margin-right:0;}
	#logo #espace_affaires{max-width:90%;width:90%}
}
@media (min-width:1300px){
	.brand{width:35%}
	.menu{width:65%}
	.navbar-brand {margin-right:0;}
}
@media (min-width:1400px){
	.brand{width:40%}
	.menu{width:60%}
	.navbar-brand {margin-right:0;}
}
@media (min-width:1500px){
	.brand{width:40%}
	.navbar-brand {margin-right:0;}
}
@media (min-width:1600px){
	.brand{width:25%}
	.menu{width:50%}
	.menu2{width:25%;}
}
@media (min-width:1700px){
	.brand{width:30%}
	.menu{width:70%}

}