/*

 * Defaults

 */





html, body {

	padding: 0px;

	margin: 0px 0px 20px 0;

}



html {

	font-size: 62.5%;

}



body {

	overflow-y:scroll !important;

	overflow-x:auto;



	padding: 0px;

	font-family: Arial, Verdana, sans-serif;

	font-size: 1.2em;

	color: #004168;

	line-height: 1.6em;

	text-align: inherit;

/**background: url(http://www.smagghe.eu/cms/files/media/fond.png) no-repeat top center fixed; **/

	/** background-size: cover; **/





}



a {

	color: #0066FF;

	text-decoration: none;

}



img {

	border: 0;

}



/*** curseur actif sur liens***/

a:link{

	cursor: pointer;

}



p {

	padding: 0px;

	margin: 0px 0 0px 0;

}



p a:hover{

	color:#004268;

	}



h1 {

	padding: 0;

	margin: 0 0 0 0;

	line-height: 1.0em;

	font-size: 1.5em;

}



/*** texte des vignettes liste projets ***/

h9 {

	font-size: 1.0em;

	color: #0000;

	line-height: 1.0em;

}



/* FOOTER */

h5 {

	font-weight: normal;

	font-size: 0.8em;

}



.project {

	display: block;

	margin: 10px;

	padding: 10px;

}



/*** .project2 {

	width: 150px;

	max-width: 150px;

	margin: 0;

	padding: 0;

}

***/



/*

 * Utilities

 */



.align-left {

	float: left;

	margin-right: 20px;

}



.align-right {

	float: right;

	margin-left: 20px;



}



.align-center {

	margin: 0 auto 0 auto;

}



/*

 * SECTIONS

 */



#wrapper {

	overflow: auto;

	margin: 60px auto 0px auto;

	width: 870px;

}



/*** LOGO + MENU ***/



#header {

	margin-bottom: 0px;

	height: 70px;

	width:870px;

	float: left;

}



#header #title a {

	text-align: left;

	clear: left;

	text-decoration: none;

	color: #004268;

	display: inline;

}



#header #title a:hover {

	text-align: left;

	float: left;

	text-decoration: none;

	background-color: #FFF;

	color: #004268;

}



#credits {

	padding-top: 100px;

	float:left;

	font-weight: normal;

}



/*** BLOC CONTENU ET FOND ***/



#content {

	/*** clear: both; ***/

	width: 870px;

	padding: 0px;

	margin-top: 15px;

	/*** background-color: rgba(255,255,255,.8); ***/

	/*** background-color: #FFFFFF; ***/

}



#main {

	float: left;

	margin-top: 0px;

	/*** background-color: #FFFFFF; ***/

}



/*** MENU ***/



ul, li {

	margin: -1px 10px -1px 10px;

	padding: 0;

	list-style-type: none;

	display: inline;

	text-decoration: none;

}



#menu {

	text-align: right;

	text-transform: uppercase;

	/*** font-weight: bold; ***/

	/*** background-color: rgba(255,255,255,.8); ***/

	background-color: #e8eaee;

	padding: 0px;

	margin-top: -45px;

	float: right;

	width: 675px;

}



#menu a {

	color: #004268;

}



#menu a:hover {

	background-color: #FFF;

	color: #0066FF;

}



#menu ul {

	display: block;

}



#menu li.sectionTitle {

	display: inline;

	margin-top: 0px;

	font-weight: bold;

	line-height: 1.0em;

}



#menu .active a {

	color: #0066FF;

}



#menu .active a:hover, .project a:hover {

	color: #0066FF;

}



/*** DESIGN DU SOUS MENU PROJETS ***/

#sousmenu {

	text-align: left;

/** text-transform: uppercase; **/

	font-weight: bold;

	/*** background-color: rgba(255,255,255,.8); ***/

/**background-color: #e8eaee; **/

	padding: 0px;

	/*** display: block; ***/

	/*** float: right; ***/

}



#sousmenu a {

	color: #004268;

}



#sousmenu a:hover {

	background-color: #FFF;

	color: #0066FF;

}



#sousmenu ul {

	display: block;

}



#sousmenu li.sectionTitle {

	display: inline;

	margin-top: 0px;

	font-weight: bold;

	line-height: 1.4em;

}



#sousmenu .active a {

	color: #0066FF;

}



#sousmenu .active a:hover, .project a:hover {

	color: #e8eaee;

}



/*

 * PROJETS

 */



/*** RAJOUT ***/



/*

 * Projects

 */



.project-link {

	display: block;

	float: left;

	margin: 0 1px 1px 0;

	padding: 0px 0px 0px 0px;

	width: 172px;

	text-align: left;

	overflow: hidden;

	outline: none;

	font-size: 0.8em;

	color: #004168;

	line-height: 1.2em;

}



/* IMAGE LISTE PROJETS */ 

.project-link .thumbnail {

	display: block;

	margin-bottom: 0px;

	height: 172px;

/** border: 1px solid #9dbacc; **/

	/** box-shadow: 1px 1px 8px #555; **/

}



.front_slideshow_image {

	cursor: pointer;

	outline: none;

	display: block;

}



.project-link .thumbnail:hover, .front_slideshow_image:hover img {

	opacity: 0.75;

	-moz-opacity: 0.75;

	filter:alpha(opacity=75);

}



.thumbnailhover {

	z-index: +2;

	display: block;

}



.hover_thumbnail {

position:absolute;

Z-index:10;

width:140px;

height:140px;

/* background: #black; */

}



.project-link img {

	display: block;

}



.project-info {

	margin-bottom: 0px;

}



.project-info h2 {

	margin-bottom: 0px;

}



.tags {

	margin-bottom: 1px;

	width: 140px;

}



.tags, .tags a {

	color: #999;

}



.tags a:hover {

	color: #EF2400;

}



.fileGroup {

	float: left;

	margin: 0 0px 0px 0;

	font-weight: bold;

}



.file {

	float: left;

}





/*** END RAJOUT ***/







.back {

	color: #0066FF;

	display: block;

	width: 100px;

	height: 50px;

	float: right;

	clear: both;

	text-align: right;

	font-weight: bold;

	font-variant: normal;

/** text-decoration: underline; **/

}



ul#projects {

	margin-top: 10px;

}



.fileGroup {

	clear: both;

}



.textblock {

	text-align: justify;

	float: left;

	clear: both;

	margin-top: 10px;

	margin-bottom: 0px;

	line-height: 1.6em;

	width: 870px;

}



.textblock h4 {

	-webkit-column-count:2;

	-webkit-column-gap:30px;

	-moz-column-count:2;

	-moz-column-gap:30px;

	column-count:2;

	column-gap:30px;

	font-weight:normal;

}



.file {

	margin-bottom: 10px;

}



.file img {

	cursor: pointer;

	display: block;

	padding: 0;

	margin: 0;

}



.title {

	font-weight: bold;

	float: left;

	clear: both;

	display: inline;

	/*** width: 300px; ***/

}



.pageText {

	text-align: justify;

	clear: both;

	margin-bottom: 30px;

	width: 570px;

}



a.project {

	color: transparent;

	padding: 0;

	margin: 0;

}



a.project:hover {

	color: transparent;

	text-decoration: none;

}



.projectInfo {

	margin-bottom: 20px;

	}





.slideshow-nav a {

	font-weight: bold;

	color: ##0066FF;

}



.slideshow-nav a:hover {

	text-decoration: underline;

}



.slideshow .slideshow-nav {

	width: 140px;

	background-color: #e8eaee;

	margin-top: 10px;

	margin-bottom: 5px;

	text-align: left;

}



.tags {

	margin-top: 5px;

	margin-bottom: 10px;

}



.tags a {

	text-decoration: underline;

}



.tags a:hover {

	text-decoration: none;

}



.file .info {

	cursor: pointer;

	float: right;

	font-size: 0.9em;

}



.file .info .caption {

	cursor: pointer;

	float: right;

	line-height: 1.6em;

}



/*

 * Blog

 */



.post {

	float:left;

	width: 415px;

/* height:230px; */

	min-height:230px;

	padding-bottom: 20px;

	margin-bottom: 20px;

	border-bottom: 1px solid #CCC;

	margin-right:20px;

	/*** background-color: rgba(255,255,255,.5); ***/

	/*** background-color: #FFFFFF; ***/

}



.postTitle {

	height:39px;

	min-height:39px;

	max-height:39px;

}





.postTitle a {

/*	text-decoration: underline; */

	color: #004168;

}



.postTitle a:hover {

	text-decoration: underline;

	color: #004168;

}



.post img {

	position: relative;

	overflow: hidden;

	min-width: 415px;

	max-width: 415px;

	display: block;

	margin: 0 10px 10px 0;

	padding: 0;

}



.post .text {

	text-align: justify;

	width: 415px;

	margin: 20px 0 20px 0;

}



.post .more {

	height: 40px;

	color: #0066FF;

	font-weight: bold;

	float: right;

	margin: 0px 0px 50px 0px;

}



.post .more:hover {

	color: #0066FF;

	text-decoration: underline;

}


/* ===== FORCE OPEN SANS (temporary) ===== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

html, body, p, li, a, input, button, textarea, select,
#header, #menu, #sousmenu, .postTitle, .pageText, .textblock,
h1, h2, h3, h4, h5, h6, .project-link, .project-info, .tags, .file, .post {
  font-family: 'Open Sans', sans-serif !important;
}
/* ===== END FORCE OPEN SANS ===== */

/* === Mobile navigation (no layout shift, 1/3 drawer) === */
#header{position:relative}
.hamburger{display:none;position:absolute;left:8px;top:50%;transform:translateY(-50%);cursor:pointer;border:0;background:none;padding:8px;line-height:1;z-index:1002}
.hamburger .line{display:block;width:28px;height:2px;margin:0;background:#000;transition:transform .2s,opacity .2s}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* menu desktop : enlever numérotation si elle apparaît */
#menu ul, #menu li{list-style:none}

.mobile-menu{position:fixed;top:0;left:0;height:100vh;width:33.333vw;max-width:420px;background:#fff;transform:translateX(-100%);transition:transform .25s ease;z-index:1001;padding:80px 24px 24px;overflow:auto;font-family:'Open Sans', Arial, Verdana, sans-serif;border-right:1px solid #eee;box-shadow:2px 0 12px rgba(0,0,0,.08)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu .menu-list{list-style:none;margin:0;padding:0}
.mobile-menu .menu-list li{margin:14px 0}
.mobile-menu .menu-list a{display:block;text-decoration:none;font-size:18px}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1000}
.scrim.visible{opacity:1;pointer-events:auto}

@media (max-width: 980px){
  /* espace pour ne pas chevaucher le logo */
  #title{margin-left:44px}
  #menu{display:none}
  .hamburger{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  .hamburger.active .line:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .hamburger.active .line:nth-child(2){opacity:0}
  .hamburger.active .line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

@media (min-width: 981px){
  .mobile-menu{display:none}
  .scrim{display:none}
  .hamburger{display:none}
}