@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../font/Lato/Lato-Regular.ttf) format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  src: local('Architects Daughter Regular'), local('ArchitectsDaughter-Regular'), url(../font/Architects_Daughter/ArchitectsDaughter-Regular.ttf) format('truetype');
  font-display: swap;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../font/Montserrat/Montserrat-Regular.ttf) format('truetype');
  font-display: swap;
}

#menu_navg_phone{
	display: none;
}


/**
@font-face {
    font-family: "font of all knowledge";
    src: local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);
    font-weight: 400;
    font-style: normal;
}
**/


:root {
/*  --main-color-background: #191919;*/
  --main-color-background: #171a21ff;
  --main-color-primary: rgba(23, 26, 33, 0.671);
  --hr-color--background: #617073ff;
  --menu-color-background: #171a21ff;
  --menu-extended-color-background: rgba(51, 51, 51, 0.8);
  --menu-color-active: #4fa02e;;
  --main-color-text: #FFFFFF;
  --main-color-backgound: #06c;
  --block-color-background: #f8f8f8ef;
  --block-support-color-background: rgba(23, 26, 33, 0.1);
  --block-color-background-hover: #f8f8f8f6;
  --section-color-background: #FFFFFF;

/* Color set 1 */
/*vert*/
/*#00c200ff*/
/*noir clair */
/*  #333333ff; */
/*noir foncé */ 
/*#171a21ff*/
/*gris clair */
/* #617073ff  */
/*bleu gris*/
/*#7a93acff*/
}

body{
    font-family: 'Lato', sans-serif;
}

.bckcolor-grey{
    background-color: var(--section-color-background);
    width: 100%;
}
.bckcolor-blue{
    background-color: var(--block-color-background);
    width: 100%;
}
.section{
    background-color: var(--section-color-background);
    width: 100%;
    padding-top: 1rem;
}

.home-section h2{
    text-align: left;
}

.home-section p{
    color: var(--block-color-background);
}

/* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: var(--menu-color-active);
}

/* selected link */
/*a:active {
    color: yellow;
}*/


ul{
 /*   list-style-image: none;*/
    list-style-image: url('../img/puce.svg') ;
    list-style-position: inside;
}

.width-150 {
    width: 150px;
}

#mapid { 
    height: 400px; 
    width: 400px;
/*    max-width: 15rem;*/
}

/*#foo h1 {
  color: var(--main-color);
}*/

h1{
    text-align: center;
    letter-spacing: .012em;
    font-weight: 300;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

h2{
    text-align: center;
    letter-spacing: .032em;
    font-weight: 300;
}

strong{
    font-weight: 600;
}

#support h1{
    color: var(--main-color-background);
}

#support .border{
    background-color: var(--block-support-color-background);
}

.text-align-center{
    text-align: center;
}

.text-align-left{
    text-align: left;
}

hr{
    background-color: var(--hr-color--background);
    opacity: 0.2;
    width: 60%;
}

.logo {
    width: 15rem;
    max-width: 15rem;
    /** align: center; **/
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
}

.border {
    /*border: 1px solid white;*/
    padding: 1rem;
    margin: 5px;
    background-color: var(--block-color-background);
    border-radius: 8px;
    color: var(--main-color-primary);
}

.border:hover{
    background-color: var(--block-color-background-hover);
}

.border h2, .border h2 a{
    color: var(--main-color-background);
    text-align: center;
    text-decoration: none;
}

.border a{
    color: var(--main-color-primary);
}

.white{
background-color: white;
}

img{
  max-width: 75rem; 
  margin: auto;
/**  size:auto; **/

}

.padding-3{
    padding-top: 3rem;
}

.padding-lr-1{
    padding-left: 1rem;
}

div.center{
    width: 100%;
    max-width: 75rem;
    margin: auto;
}

/** should be somewhere else  **/
section#hexa {
    width: 100%;
    display: block;
    max-width: 75rem;
    margin: auto;
}

/** Mission and partner**/
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

div.flex-container {
    width: 100%;
    max-width: 75rem;
    margin: auto;
}

div.flex-container > section{
    flex: 1 200px;
    margin: 7px;
}


div.center > section h2::after, .home-section h2::after {
    content: '';
    display: block;
    width: 73px;
    height: 3px;
    background-color: var(--menu-color-active);
    margin-top: 6px;
    margin-bottom: -12px;
}


/** Support  **/

section#support{
    background-color: var(--section-color-background);
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}



/**
avant les div était section
**/
/**
div.flex{
    display: flex;
}
section.flex{
    display: flex;
    flex-wrap: wrap;
}
**/
/**
div.flex>section {
    flex: 1 200px;
    margin: 3px;
}
**/
/**
section.flex>section {
    flex: 1 200px;
    margin: 3px;
}



div.flex>section h2{
    text-align: left;
}

div.flex>section h2::after {
    content: '';
    display: block;
    width: 73px;
    height: 3px;
    background-color: var(--menu-color-active);
    margin-top: 8px;
    align: center;
}*/

/**
div.flex section p {
    margin: 1rem;
    text-align: justify;
    text-justify: auto;
 }
**/

#sentence {
    margin-top: 1rem;
    padding-top: 1rem;
    position: relative;
    width: 100%;
   /* background:  var(--menu-color-background); */ 
    filter: alpha(opacity=70);
    text-align: center;
}

body {
    background-color :  var(--main-color-background);
    margin: 0;
    padding: 0;
    position: relative;
    color: var(--main-color-text);
}

header {
    width: 100%;
    background:  var(--menu-color-background);
    overflow: visible;
}

nav#nav{
    /*top fix */
/*    position: fixed;
    top: 0;*/
    font-size: 1rem;
    width: 100%;
}

ul#navigation{
    list-style-type: none;
    list-style-image: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: var(--menu-color-background);
    font-size: 1.2rem;
}

ul#navigation li {
    float: left;
    list-style-type: none;
}

ul#navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul#navigation li a:hover:not(.active) {
    background-color: #4fa02e;
}

ul#navigation li a:hover {
    background:#222;
/**    color:#282828;**/
    color:#00C200;
}

ul#navigation li:hover > a {
    background:#222;
    color: white;
}

/* brand name */

ul#navigation li a.brand-name {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: red;
}

ul#navigation li a.brand-name:hover {
    background:#222;
/**    color:#282828;**/
    color:#00C200;
}


ul#navigation li:hover > a.brand-name {
    background:#4fa02e;
    color: white;
}

.brand-name {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .15em;
    font-size: 1.2rem;
    font-family: 'Architects Daughter', cursive;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
    visibility:visible;
    opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;    
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    width:180px;
    background: var(--menu-extended-color-background);
/*    box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;
    transition:opacity 0.2s linear, visibility 0.2s linear;*/
}

ul#navigation ul {
    /*top: 43px;
    left: 1px;*/
}

ul#navigation ul li ul {
  /*  top: 0;
    left: 181px;*/
}

ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
/**    border-bottom:1px solid #c9c9c9; **/
}

ul#navigation > ul li a {
    background:none;
    padding:7px 15px;
    color:var(--main-color-text); /**#616161;**/
/**    text-shadow:1px 1px 0px #fff;**/
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
    background-color: var(--menu-color-background);
}

ul#navigation li a.first {
    border-left: 0 none;
}

ul#navigation li a.last {
    border-right: 0 none;
}



/** clearfix **/
.clearfix::before, .clearfix::after {
  display: table;
  content: ' ';
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -ms-flex-order: 1;
      order: 1; }

.clearfix::after {
  clear: both; }

/** Hexa  **/

div.hexIn a:hover, a:focus {
    color: white;
}

#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
/**  margin: 0 auto;**/
  overflow: hidden;
  font-size: 1rem;
  list-style-type: none;
  padding-left: 0;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin:0 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg);
}

.hex h2, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  background-color: rgb(51,51,51);
  opacity: 0.80;
  filter: alpha(opacity=80);
  font-weight: 300;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h2 {
  bottom: 50%;
  padding-top:50%;
  font-size: 1em;
  z-index: 1;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
.hex h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}
.hex p {
  top: 50%;
  padding-bottom:50%;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);
}


/*** HOVER EFFECT  **********************************************************************/
.hexLink:hover h2, .hexLink:focus h2,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
    color:white
}

footer h3{
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--block-color-background);
    font-size: 16px;
}

footer a{
    font-weight: 100;
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
  #hexGrid{
    padding-bottom: 4.4%
  }
  .hex {
    width: 20%; /* = 100 / 5 */
  }
  .hex:nth-child(9n+6){ /* first hexagon of even rows */
    margin-left:10%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
  #hexGrid{
    padding-bottom: 5.5%
  }
  .hex {
    width: 25%; /* = 100 / 4 */
  }
  .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media all and (max-width: 990px){
	
	/*enlève le menu principal */
	nav#nav{
		display: none;
	}
	
	ul#navigation-resp li.Sousmenu:hover{
		background-color: #4fa02e;
	}
	
	ul#navigation-resp li.Sousmenu li a:hover{
		background-color: black;
	}
	
	nav#menu_navg_phone ul#navigation-resp li a{
		color: white;
		text-decoration: none;
		display: flex;
		width: 25vw;
		height: 5vh;
		padding: 7px;
	}
	
	#returnIndex{
		margin-bottom: 10px;
		margin-top: 10px
	}
	 
	li#returnIndex a:hover{
		color: white !important;
	}
	 
	.brand-name{
		text-align: left;
		color:red !important;
		text-transform: uppercase;
    		font-weight: 600;
    		letter-spacing: 0em;
    		font-size: 1rem;
    		font-family: 'Architects Daughter', cursive;
	}
	
	nav#menu_navg_phone ul#navigation-resp li.Sousmenu ul li{
		display: flex;
		width: 50%;
		text-align: left;
	}
	
	nav#menu_navg_phone ul#navigation-resp li.Sousmenu ul li a{
		display: flex;
		width: 100%;
		margin: auto;
		height: 70%;
		text-align: left;
	}
	
	input[type=checkbox].menu-checkbox + label a::after{
		content: '\02C3';
		width: inherit;
	}
	
	input[type=checkbox].menu-checkbox:checked + label a::after{
		content: '\02C5';
	}
	
	.Sousmenu{
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	ul#navigation-resp li{
		float: none;
	}
	
	ul#navigation-resp{
		font-size: 1rem;
	}
	
/***** For Global menu***/

	.menu-checkbox {
		left: 0;
		width: 100%;
		opacity: 0;
		position: absolute;
		cursor: pointer;
		height: 30px;
		top: 4px;
	}
	
	li.Sousmenu input.menu-checkbox{
		width: 10rem;
		height: 18px;
	}
	
	nav#menu_navg_phone > label.menu-toggle{
		flex-direction: row;
    		color: white;
    		border-bottom: red solid 2px;
    	}
  
  	#menu_navg_phone{
		display: flex;
		flex-direction: column;
   		position: fixed;
   		padding: 10px;
		z-index: 9999;
		background-color: black;
		border: 1px solid;
		top: 1rem;
		text-align: center;
		left: 0rem;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
		max-width: 80vw;
		max-height: 100vh;
 		}
		
		
	nav#menu_navg_phone ul#navigation-resp li label a{
		color: white;
	}	


	nav#menu_navg_phone input#menu-checkbox{
		display: flex;
	}
	
	nav#menu_navg_phone label.menu-toggle{
		display: block;
		}
	
	nav#menu_navg_phone ul#navigation-resp {
		display: none;
		width: auto;
		list-style-type: none;
		padding: 0rem;
		height: auto;
		flex-direction: column;
		margin-top: 0;
	}

  	nav#menu_navg_phone input#menu-checkbox:checked ~ ul#navigation-resp{
		display: flex;
 	 }
	 
	nav#menu_navg_phone ul#navigation-resp input:checked ~ label{
		background-color: #4fa02e;
	}
	
	nav#menu_navg_phone ul#navigation-resp li.Sousmenu ul{
		display: none;
		flex-wrap: wrap;
		padding-left: 1rem;
		background-color: #8080805c;
		justify-content: space-around;
		width: auto;
		position: relative;
		visibility: visible;
		max-height: 55vh;
		height: auto;
		padding: 5px;
	}
	nav#menu_navg_phone ul#navigation-resp li.Sousmenu input#menu-checkbox-Servives:checked ~ ul{
		display: flex;
		flex-wrap: wrap;
		padding-left: 1rem;
		background-color: #8080805c;
	}
	
	nav#menu_navg_phone ul#navigation-resp li.Sousmenu input#menu-checkbox-Projet:checked ~ ul{
		display: flex;
		flex-wrap: wrap;
		padding-left: 1rem;
		background-color: #8080805c;
	}
}



@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
  #hexGrid{
    padding-bottom: 7.4%
  }
  .hex {
    width: 33.333%; /* = 100 / 3 */
  }
  .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 600px) { /* <- 2-1  hexagons per row */
  #hexGrid{
    padding-bottom: 11.2%
  }
  .hex {
    width: 50%; /* = 100 / 3 */
  }
  .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 400px) {
    #hexGrid {
        font-size: 0.65rem;
    }
}