/** break points
	640 -- 768 -- 1024 -- 1280 -- 
     phone  tablet  laptop  desktop

*/
/***** VARS **********/
/***** FOND NOIR **********/
/* 
 
:root {

	--page-width: 960px;

	--fond-clair: #999;
	--fond-fonce: #000;
	
	--color-body-bg: var(--fond-fonce);
	--color-txt: white;
	--color-h: white;
	--color-a: darkorange;
	--color-a-sel: #030;
	--color-highlight: red;

	--menu-bg: transparent;
	--menu-fg: white;
	--menu-bar-bg: transparent;
	--menu-bar-fg: inherit;
	--color-menu-underline: transparent;

	--footer-fg: black;
	--footer-bg: var(--fond-clair);

	--header-fg: white;
	--header-bg: transparent;

	--main-fg: white;
	--main-bg: var(--fond-fonce);
}
*/

:root {

	--page-width: 960px;

	--fond-clair: #ddd;
	--fond-fonce: #fff;
	
	--color-body-bg: var(--fond-fonce);
	--color-txt: black;
	--color-h: black;
	--color-a: darkorange;
	--color-a-sel: #030;
	--color-highlight: red;

	--menu-bg: transparent;
	--menu-fg: #666;
	--menu-bar-bg: transparent;
	--menu-bar-fg: inherit;
	--color-menu-underline: transparent;

	--footer-fg: black;
	--footer-bg: var(--fond-clair);

	--header-fg: white;
	--header-bg: transparent;

	--main-fg: white;
	--main-bg: var(--fond-fonce);
}

a:hover {
	color: var(--color-a);
}

body {
	background-color: var(--fond-fonce);
}
/***** FONTS **********/

@font-face {
	font-family: Montserrat;
	font-weight: 400;
	src: url(/wq_res/fonts/static/Montserrat-Regular.ttf);
}
@font-face {
	font-family: Alkalami;
	src: url(/wq_res/fonts/Alkalami-Regular.ttf);
}
@font-face {
	font-family: MerryWeather;
	src: url(/wq_res/fonts/MerryWeather-Regular.ttf);
}
@font-face {
	font-family: Nunito;
	src: url(/wq_res/fonts/Nunito-VariableFont_wght.ttf);
}
@font-face {
	font-family: DancingScript;
	src: url(/wq_res/fonts/DancingScript-VariableFont_wght.ttf);
}
body {
	font-family: "Nunito";
}


/***** COLORS **********/

h2 {
	color: var(--color-h);
}
#footer a {
	color: #666;
}
#footer {
	background-color: var(--footer-bg);
}
#template, #header {
	background-color: var(--color-body-bg);
	color: var(--color-txt);
}
h1, h2, h3 ,h4 {
	color: var(--color-h);
}
a {
	color: var(--color-a);
}
a.sel {
	color: var(--color-a-sel);
}


/** RE-ness des blocs de taille selectionnable **/

.size16 ,
.size20 ,
.size25 ,
.size30 ,
.size33 ,
.size40 ,
.size50 ,
.size60 ,
.size66 ,
.size75 ,
.size100 { margin: 0px; box-sizing: border-box;  }

.size16 { width: 16.666%; }
.size20 { width: 20%; }
.size25 { width: 25%; }
.size30 { width: 30%; }
.size33 { width: 33.333%; }
.size40 { width: 40%; }
.size50 { width: 50%; }
.size60 { width: 60%; }
.size66 { width: 66.666%; }
.size75 { width: 75%; }
.size100 { width: 100%; }

@media (max-width: 641px) {
	.mobile100 { width: 100%; display: block; }
	.mobile0 { display: none; }
	.size16 { width: 50%; }
	.size20 { width: 50%; }
	.size25 { width: 50%; }
	.size30 { width: 100%; }
	.size33 { width: 100%; }
	.size40 { width: 100%; }
	.size50 { width: 100%; }
	.size60 { width: 100%; }
	.size66 { width: 100%; }
	.size75 { width: 100%; }
	.size100 { width: 100%; }
	.sizerectangle { width: 50%; }

}

/***** PRINT **********/

@media print {
	#zone_main {
		display: block;
	}
	#menu,
	#footer { display: none; }
	#header {
		break-after: avoid; 
		page-break-after: avoid;
	}
	#body {
		width: 650px; 
	}
	#main {
		page-break-inside: auto;
		page-break-before: avoid;
		width: 100%; 
		box-sizing: content-box; 
	}
	.mobile100 { width: 100%; display: block; }
	.mobile0 { display: none; }
	.size16 { width: 50%; }
	.size20 { width: 50%; }
	.size25 { width: 50%; }
	.size30 { width: 100%; }
	.size33 { width: 100%; }
	.size40 { width: 100%; }
	.size50 { width: 100%; }
	.size60 { width: 100%; }
	.size66 { width: 100%; }
	.size75 { width: 100%; }
	.size100 { width: 100%; }
}



/***** SHORTCUTS **********/

.pad5 { padding: 5px; }
.pad10 { padding: 10px; }
.padr10 { padding-right: 10px; }
.padr5 { padding-right: 5px; }
.padl10 { padding-left: 10px; }
.padl5 { padding-left: 5px; }
.pad20 { padding: 20px; }

.flex { display: flex; flex-wrap: wrap; }
.floater { float: left; }
.right { text-align: right; }
.grow { flex-grow: 1; }
.center { text-align: center; }
.floater.right { float: right; }
.left { text-align: left; }
.padded-tb { padding: 10px 0px; }
.padded { padding: 10px; }
.padded-b { padding-bottom: 10px; }
.superpadded { padding: 20px; }
.shadowed { box-shadow: 3px 3px 3px #000; }
.marged { margin-right: 40px; }
.rounded { border-radius: 20px; border: none; }
.flex_spacer { min-width: 20px; }
.overflow_hidden { overflow: hidden; }
.marg_bottom_10 { margin-bottom: 10px; }


/***** GENERIC **********/

body, html {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}
* {
	box-sizing: border-box;
}
img {
	max-width: 100%;
}
ul {
	list-style: none;
	padding-left: 5px;
	margin-left: 5px;
}
h2 {
	padding: 0px;
	padding-top: 60px;
	font-weight: 300;
	font-size: 30px;
}

/***** BOUTONS **********/

.btn img { vertical-align: middle; }
.btn:hover { box-shadow: 0px 0px 4px #000; }
.btn {
	text-decoration: none;
	box-sizing: border-box;
	background-color: var(--bg);
	color: white;
	display: block;
	padding: 10px;
	width: 100%;
	text-align: center;
	margin: 0px;
	cursor: pointer;
	border: none;
	font-size: 16px;
}


/***** TEMPLATE **********/

#footer .in ,
#content {
	width: var(--page-width);
	max-width: 100%;
}

#footer .in {
	margin: auto;
	padding-top: 10px;
	color: black;
}
#footer ul li {
	padding: 5px;
}
#footermenu ul li a:hover {
	color: white;
}
#footermenu ul li a {
	color: black;
	text-decoration:  none;
}

#footermenu .far.fa-minus, 
#menu .far.fa-plus { color: var(--color-highlight); }
.projets_submenu .far.fa-minus { color: var(--color-highlight); }

#footermenu .far.fa-minus:hover, 
#menu .far.fa-plus:hover,
.projets_submenu .far.fa-minus:hover {
	color: var(--color-a);
}

#menu {
	text-align: right;
	height: 100%;
	vertical-align: bottom;
	font-weight: 400;
	font-size: 22px;
	padding-top: 20px;
	width: var(--page-width);
	margin: auto;
	max-width: 100%;
}
#menu ul {
	padding: 0px;
	display: block;
	margin: 0px;
}
#menu ul li {
	display: inline-block;
	padding: 0px;
	padding-left: 20px;
}
#menu ul li a {
	color: var(--menu-fg);
	text-decoration: none;
}
#menu ul li a:hover {
	color: var(--color-a);
}
#menuopener a {
	color: var(--menu-fg);
	text-decoration: none;
	font-size: 30px;
}
#menuopener {
	display: none;
	position: absolute;
	right: 15px;
	top: 30px;
	color: var(--menu-fg);
	cursor: pointer;
}
#page {
	width: 100%;
}
#header {
	position: sticky;
	top: 0px;
	border-bottom: solid 1px #999;
	width: 100%;
	padding: 30px 20px 15px 20px;
	z-index: 100;
	flex-wrap: wrap;
}
@media (max-width:500px) {
	#header {
		padding: 30px 10px 15px 10px;
	}
}
#logo  {
	font-weight: 1000;
	font-size: 40px;
	padding-right: 10px;
	display: inline-block;
	height: 50px;
	position: absolute;
	top: 10px;
	left: 10px;
}

#footer {
	width: 100%;
	min-height: 100px;
}
#zone_main {
	display: flex;
	flex-wrap: wrap;
}

#content {
	max-width: 100%;
	margin: auto;
	padding-top: 30px;
}
#logo img {
	width: 300px;
	max-width: 80%;
}


.toplink a {
	font-weight: bold;
}
.projets_nav .fa-regular:hover,
.toplink a:hover ,
.projets_nav .far:hover {
	color: var(--color-a);
}
.projets_nav .fa-regular,
.toplink a ,
.projets_nav .far {
  font-size: 30px;
	color: #666;
}
.toplink {
  text-align: right;
	padding-bottom: 10px;
}


/***** SNIPPET SLIDER **********/

.slide .legende {
	background-color: rgba(0,0,0,50%);
}
#slider {
	background-color: #666;
}
#slide1, #slide2, #slide3 { width: 90%; height: 100%;  }
#slide1 { background-color: red; }
#slide2 { background-color: teal; }
#slide3 { background-color: pink; }

.slide {
	background-size: cover !important;
	background-position: center center !important;
	cursor: pointer;
}

#slider div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slide {
	text-align: right;
	padding: 0px;
	margin: 0px;
	position: relative;
}
.slide .legende {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 100%;
	padding: 10px;
}
.slide h3 { font-size: 30px; }
.slide h4 { font-size: 20px; }
.slide h3,
.slide h4 {
	font-weight: 400;
	padding: 0px;
	margin: 0px;
	text-transform: uppercase;
	text-shadow: 0px 0px 10px black;
	color: white;
}

#slider > div  ,
.slide,
#slider {
	width: 98vw;
	height: 66vw;
	max-width: 960px;
	max-height: 640px;
}



/***** SNIPPET PROJETS **********/
	#submenu {
		width: var(--page-width);
		max-width: 100%;
		margin: auto;
	}
	.projets_submenu  {
		padding-top: 10px;
		width: 100%;
	}
	.projets_submenu ul {
		display: flex; 
		padding: 0px;
		margin: 0px;
		margin-top: 0px;
	}
	.projets_submenu li {
		display: block;
		padding: 0px 10px;
		margin: 0px;
	}
	.projets_submenu li a.selected {
		text-decoration: underline;
	}
	.projets_submenu li a:hover {
		color: darkorange;
	}
	.projets_submenu li a {
		color: var(--menu-fg);
		text-decoration: none;
		font-size: 18px;
	}
	.display_projet {
		display: flex;
		flex-wrap: wrap;
	}
	.display_projet_description {
	}
	.display_projet_description, 
	.display_projet_header {
		padding: 10px;
	}
	/*
	.display_projet_image01 ,
	.display_projet_image02  {
		padding-left: 5px;
	}
	*/
	.display_projet_image01 img, 
	.display_projet_image02 img {
		width: 100%;
	}
	.display_projet_header h2,
	.display_projet_header h3 {
		color: var(--menu-fg);
		padding: 0px 0px;
		margin: 0px;
		text-decoration: none;
		border: none;
	}
	.display_projet dl {
		display: flex;
		width: 100%;
		padding: 0px;
		margin: 0px;
		font-size: 14px;
	}
	.display_projet dd,
	.display_projet dl,
	.display_projet dt {
		padding: 0px;
		margin: 0px;
	}
	.display_projet dt {
		width: 50%;
		text-align: left;
	}
	.display_projet dd {
		width: 50%;
		text-align: right;
	}
	.display_projet_header {
		display: flex;
		flex-direction: column;
	}
	.display_projet_nom {
		flex: 1;
	}
	.display_projet_fiche_technique hr:last-of-type {
		margin-bottom: 0px;
	}
	.display_projet_images div img ,
	.display_projet_images {
		width: 100%;
	}
	.liste_projets {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.projet_thumb {
		width: 200px;
		height: 200px;
		background-position: center center;
		margin: 19px;
		background-size: cover;
		cursor: pointer;
	}
	.projet_thumb img {
		 object-fit: cover;
		 max-width: 100%;
		 max-height: 100%;
		 width: 100%;
		 height: 220px;
	}
	.projet_legende .nom{
		font-weight: 700;
	}
	.projet_legende {
		position: absolute;
		/*
		width: 100%;
		height: 100%;
		*/
		/*background-color: rgba(255,0,0,0.4);*/
		color: white;
		padding: 5px;
		bottom: 0px;
		/*padding-top: 75%;*/
	}
	.projet_content:hover  {
		background-color: rgba(255,0,0,0.4);
		opacity: 1;
	}
	.projet_content  {
		position: relative;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.display_projet_header {
		height: 230px; /* car padding 10 + 10 compris dedans */
		overflow: hidden;
		margin-bottom: 10px;
		padding-bottom: 0px;
	}
	.display_projet img {
		display: block;
	}
	.display_projet_image01 img {
		object-fit: cover;
		height: 220px;
	}
	.display_projet_image01.position0 img { object-position: center center;  }
	.display_projet_image01.position1 img { object-position: center top;  }
	.display_projet_image01.position2 img { object-position: center bottom;  }


@media (max-width: 961px) {
	#content {
		padding-left: 1%;
		padding-right: 1%;
	}
}
.mobileonly {
	display: none;
}
@media (max-width: 641px) {
	.nomobile { display: none; }
	.mobileonly { display: inherit; }
	#menu {
		display: none;
	}
	#menuopener {
		display: block;
	}
	.projet_thumb {
		width: 46%;
		margin: 2%;
	}
	#footermenu ul {
		padding-left: 0px;
	}
	#footer .right {
		text-align: left;
	}
	#logo {
		width: 320px;
		position: inherit;
		top: 0px;
		left: 0px;
	}
	#menu ul li {
		width: 100%;
	}
}