/* Layout */


body {
  opacity: 0;
  transition: opacity 1s ease;
}

/* Classe pour faire apparaître le contenu */
body.visible {
  opacity: 1;
}



html.scroll-disabled,
body.scroll-disabled {
  overflow: hidden;
}
body {
    height: 100%;
	background:#f3f1e9;
}
html.scroll-disabled,
body.scroll-disabled {
  overflow: hidden;
}
main#main {
  margin-top: 120px;
}

body.page_projets main#main {
 
}
body.controller_projects.action_index main#main {
 margin-top: 125px;
}
body.controller_projects.action_view main#main {
 margin-top: 120px;
}
body.page_home main#main {
  margin-top: 120px;
}

div#container {
    min-height: calc(100vh - var(--footer-height));
    position: relative;
    padding: 25px;
    box-sizing: border-box;
}
header#header {
	position: fixed;
	  z-index: 2000;
	  top: 0;
	  right: 0;
	  left: 0;
	  
}
#header > .wrapper {
  display: flex;
    width: 100%;
	align-items: center;
  background: #f3f1e9;
  transition: 0.2s;
  box-sizing: border-box;
  padding: 33px 30px 45px 22px;
  justify-content: flex-start;

  
}




#footer {display:none;}

/* Header & menu  flex-grow: 2; */
#logo {
	position: relative;
	flex: 0 0 auto;
	width:260px;
   
}
#logo img {
	width:100%;
	height: auto;
	  transition: 0.3s;
	margin-left: 0px;
    display: block;
	cursor:pointer;
}




#baseline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
}
/*
#menu_button {
	  position: fixed;
	  right: -40px;
	  top: 34px;
	  cursor: pointer;
	  height: 30px;
	  width: 100px;
	  background: url('../img/menu.png') no-repeat;
	  background-size: 34%;
}
*/
#menu_button {
	  position: fixed;
	  right: -26px;
	    top: 42px;
	  cursor: pointer;
	  height: 30px;
	  width: 90px;
	  background: url('../img/menu.svg') no-repeat;
	  background-size: 44%;
}





#menu {
	display:none;
}
#menu ul li a.active,
#menu ul li a:hover {
     font-family: var(--strong-font-family);
	 text-decoration:none;
}
body.menu_expanded #menu {
    /*transform: translateY(0);*/
		position: fixed;
	    z-index: 100;
	    top: 111px;
	    right: 0;
	   /* transform: translateY(calc(-100%));*/
	    background: #f3f1e9;
	    padding: 30px;
	    text-align: right;
	    box-sizing: border-box;
	    width: 100%;
		height:90vh;
		display:block;
		z-index:3000;
}

body.menu_expanded #menu_button {
  background: url('../img/close.svg') no-repeat center top;
    background-size: auto;
  background-size: 22px;
  top: 40px;
  right: -19px;
}

body.menu_expanded #menu {
	    padding: 20px;
		opacity: 0.95;
}

/*PAGE HEADER*/
.page_header {
  position: fixed;
  z-index: 2100;
  left: 25px;
  right: 25px;
  top: 110px;
  height: auto;
  padding-bottom: 15px;
  display: flex;
  background: #f3f1e9;
}

body.page_home .page_header ul.sous-menu {
	display:none;
}
.page_nav {
	position: absolute;
	right: 0;
	display: flex;
	top: -5px;
	
}
.page_nav img {
	padding-left: 8px;
	padding-top:6px;
	  width: 14px;
	  height: 20px;
}
.page_nav img.page_prev{
	display:none;
}
.page_header.Index ul.sous-menu,
.page_header.Index h3.page_index {
	
}
h3.page_name,
h3.page_name a,
h3.page_index a,
h3.page_projects a {
	font-family: var(--strong-font-family);
	max-width:85%;
}
h3.page_index,
h3.page_projects {
 	position:fixed;
    right: 30px;
}

.filters_menu {
	padding-top:33px;
}

.sector_filter,
.community_filter,
.sous-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;          /* alignement horizontal */
    align-items: center;    /* au cas où les lignes diffèrent */
}
.sector_filter li ,
.community_filter li,
.sous-menu li {
    display: inline-flex;
    align-items: center;
}
.sector_filter li a,
.community_filter li a {
  
}
.sector_filter li + li::before ,
.community_filter li + li::before ,
.sous-menu li + li::before {
    content: ".";
    margin: 0px 10px 0 7px;    /* espace identique avant et après le point */
}

ul.sous-menu {
 	position:fixed;
    left: 200px;
	display:none;
}
ul.sector_filter a:hover,
ul.community_filter a:hover,
ul.sous-menu a:hover,
h3.page_index a:hover,
ul.sector_filter a.active,
ul.community_filter a.active,
ul.sous-menu a.active,
h3.page_index a.active {
	text-decoration:underline;
}
h3.filter_name {
	float: left;
	  padding: 0 10px 0 0;
	
	  font-family: var(--strong-font-family);
}
h3.filters_name {

	font-family: var(--strong-font-family);
}



@media only screen and (min-width: 768px) {
	
	#header > .wrapper {
	  padding: 45px 70px 120px 70px;
	}

	body.scrolling #header > .wrapper {
	    transition: 0.2s;
		padding: 40px 70px 75px 70px;
	}
	#logo {
		width:71%;
		transition: 0.3s;
	}

	#logo img {
		margin-left: -10px;
	}
	
	body.page_home main#main {
	  margin-top: 200px;
	}

	
		#menu_button {
			right: 35px;
			    top: 64px;
			    height: 90px;
			    background-size: 72%;
			    width: 95px;
		}

		body.scrolling #menu_button {
			    top: 60px;
			    transition: 0.3s;
		}
	.page_header {
	    left: 70px;
	    right: 70px;
	 	top:222px;	
		 transition: 0.2s;
	}
	body.scrolling .page_header {
	 	top:150px;
		 transition: 0.2s;
	}
	

		
		body.menu_expanded #menu_button {
			background-size: 35px;
			    top: 64px;
			right:30px;
		}

	
	body.menu_expanded #menu {
		  padding: 70px;
		   top: 150px;
	}
	div#container {
	   padding: 70px;
	}
	
	
	
	h3.page_index,
	h3.page_projects {
	    right: 70px;
	}
	main#main {
	  margin-top: 195px;
	}
	
	ul.sous-menu {
	 	display:block;
	}
	body.controller_projects.action_index main#main {
	  margin-top: 190px;
	}
	body.controller_projects.action_view main#main {
	  margin-top: 220px;
	}
	
}
@media only screen and (min-width: 1024px) {
	#logo {
		width:38%;
		transition: 0.3s;
	}
	body.scrolling #logo  {
	   width:28%;
	}
	#logo img {
		margin-left: -10px;
	}
    #menu_button {
       right: 54px;
       top: 72px;
       height: 90px;
       background-size: 85%;
     }

	  body.menu_expanded #menu_button {
	     background-size: 50px;
	     top: 64px;
	     right: 30px;
	   }
	   
	
	
}
@media only screen and (min-width: 1280px) {
	body.controller_projects.action_view main#main {
	    margin-top: 165px;
	  }
	  body.menu_expanded #menu_button {
	      background-size: 46px;
	      top: 70px;
	      right: 45px;
	    }
}

/* Message */
.cpnt_message {
    position: fixed;
    z-index: 10000;
    top: var(--default-spacing);
    left: 50%;
    transform: translateX(-50%);
    background: #deae1e;
    color: #fff;
    padding: 20px;
    width: auto;
    text-align: center;
}