html, body {
	margin: 0;
	padding: 0;
	font-family: "Chaparral", times, times-new-roman, serif;
	color: #333;
	background:/*url(https://thomas-daveluy.fr/scripts/pictures/background.png) */#fff;
	
	background:linear-gradient(-45deg, #007ec5, #dbffe6) no-repeat top left;
	background:linear-gradient(135deg, #f3fff4, #ddf3ef, #b3d9ee) no-repeat top left;
	
	
	background-attachment:fixed ;
	background-size:100vw 100vh;
}
body{padding-top:120px;}

img{border:none;}
a{
text-decoration:none;
color:#000;
}
.post-content a:not(.media-link){
	color:var(--blog);
	transition:all .25s;
}
.post-content a:not(.media-link):hover{
	background:var(--blog);
	color:#fff;
	border-radius:50px;
	margin:0 -5px;
	padding:0 5px;
}
.post-content a:not(.media-link):has(img):hover {
  background: none;
  color: inherit;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

header{
	box-shadow: 0 0 8px rgba(0,96,96,.5);
	background:rgba(255,255,255,.8);
}
#nav_right form{
	border:2px solid var(--blog);
	padding:0;
	margin-left:10px;
	border-radius:25px;
	height:36px;
	width:36px;
	font-size:0;
	color:transparent;
	overflow:hidden;
	background:var(--blog);
	transition:all .25s;
	white-space: nowrap;
	z-index:20;
}
#nav_right form:hover, #nav_right form:focus-within{
	width:270px;
	margin-left:-224px;
	background:#fff;
}
#nav_right form label{
	display:inline-block;
	vertical-align: top;
	width:38px;
	height:38px;
	background: url(https://thomas-daveluy.fr/scripts/pictures/search.svg) no-repeat 3px 3px;
  background-size:28px;
	transition:all .25s;
}
#nav_right form:hover label, #nav_right form:focus-within label{
	width:42px;
	background-position:8px 4px;
	filter:brightness(.6) invert(1) sepia(1) saturate(10) hue-rotate(180deg);
}
#nav_right form input[type=text], #nav_right form input[type=submit]{
	display:inline-block;
	vertical-align: top;
	border:none;
	padding:0 10px;
	width:210px;
	height:100%;
	font-size:16px;
}
#nav_right form input[type=text]{
	transition:all .25s;
	transition-delay:0s;
	background:rgba(255,255,255,.5);
}
#nav_right form:hover input[type=text], #nav_right form:focus-within input[type=text]{
	width:158px;
	transition-delay:.75s;
}
#nav_right form input[type=submit]{
	font-size:14px;
	text-transform: uppercase;
	color:#fff;
	cursor:pointer;
	background:var(--blog);
	padding:0;
	width:51px;
	padding-right:4px;
}




a.media-link img{
	/*box-shadow: 0 0 4px rgba(0,0,0,.25) !important;
	transition:all 0.2s !important;
	width:100%;*/
}
a.media-link:hover img{
	/*box-shadow: 0 0 10px rgba(0,0,0,.5) !important;*/
	/*transform: scale(1.025);*/
	/*margin:-5px;
	width:calc(100% + 10px);
	max-width:calc(100% + 10px);
	border-radius:6px;*/
}


a.media-link{
	box-shadow: 0 0 4px rgba(0,0,0,.25) !important;
	transition:all 0.2s !important;
	padding:0;
	overflow:hidden;
	font-size:0;
	margin:0;
	display: inline-block;
}
a.float-left{
	float:left;
	margin-right:15px!important;
	margin-bottom:15px!important;
}
a.float-right{
	float:right;
	margin-left:15px!important;
	margin-bottom:15px!important;
}
a.media-link:hover{
	margin:-5px -5px -5px -5px;
	padding-right:10px;
	padding-bottom:10px;
	border-radius:7px;
}
a.float-left:hover{
	margin-right:10px!important;
	margin-bottom:10px!important;
}
a.float-right:hover{
	margin-left:10px!important;
	margin-bottom:10px!important;
}
a.media-link img{
	margin:0;
	width:100%;
	height:100%;
	object-fit: cover;
	transition:all 0.2s !important;
}

a.media-link:hover img{
	transform: translate(5px, 5px) scale(1.1);
}

h1, h2, h3, h4, h5, h6{
	font-family:"Snippet", tahoma, arial,helvetica,sans-serif;
	font-weight:normal;
}

#page{
	border-left:2px solid rgba(0,128,128,.1);
	max-width:960px;
	width:100%;
	padding:0 20px;
	margin-left:calc(50% - 170px);
	transform: translateX(-50%);
}




nav{
	position:fixed;
	z-index:100;
	right:20px;
	top:80px;
	bottom:20px;
	padding:20px;
	width:280px;
	background:rgba(255,255,255,.9);
	box-shadow: 0px 3px 6px rgba(0,96,96,.2);
	overflow-y:auto;
	overflow-x:hidden;
	border-radius:12px;
}
nav ul#nav{
	padding:0;
	list-style:none;
	width:266px;
	margin:0 0 0 -7px;
	padding:0 13px 13px;
	transition:margin 0.25s;
	border-bottom:1px solid #ccc;
}
nav ul#expo{
	margin-top:10px;
	margin-bottom:25px;
	padding-left:0px;
}
nav ul#expo li{
	list-style:none;
	margin-bottom:10px;
}
nav ul#expo li a{
	display:block;
	overflow: hidden;
}
nav ul#expo li img{
	float:left;
	padding-top:1px;
	margin:0 5px 20px 0
}

nav ul#nav li{
	display:inline-block;
	width:64px;
	height:64px;
	vertical-align:top;
	margin:0px 5px 5px 0;
}
nav ul#nav li:first-child{
	float:left;
	margin:69px 5px 0px 0;
}
nav ul#nav li:nth-child(2){
	width:128px;
}
nav ul#nav li:nth-child(3){
	width:128px;
	height:128px;
}
nav ul#nav li:nth-child(4){
	margin:0;
	margin-top:64px;
}
nav ul#nav a, nav ul#nav form{
	display:block;
	background:var(--blog);
	font-size:15px;
	text-align:right;
	padding-right:5px;
	height:24px;
	padding-top:40px;
	width:59px;
	color:#fff;
	transition:opacity 0.25s;
}
nav ul#nav a:hover{
	opacity:0.7;
}
nav ul#nav li:first-child a{
	background:#ccc;
}
nav ul#nav li:nth-child(3) a{
	padding-top:93px;
	height:35px;
	font-size:24px;
	width:121px;
	padding-right:7px;
	background:var(--portfolio);
}
nav ul#nav li:nth-child(4) a{
	margin-left:0px;
	background:var(--blue);
}
nav ul#nav li{
	overflow:hidden;
}
nav ul#nav form{
	margin-left:64px;
	padding-left:128px;
	width:123px;
	padding-top:0;
	height:64px;
	transition:margin 0.25s, padding 0.25s, background 0.25s;
	background: url(https://thomas-daveluy.fr/scripts/pictures/search.svg) no-repeat 30px 32px var(--blog);
	background-size:28px;
}
nav ul#nav li:hover form{
	background-position:-50px 32px;
}
nav ul#nav form label{
	font-size:14px;
	display:block;
	padding-top:14px;
	padding-bottom:5px;
}
nav ul#nav form input[type=text]{
	width:98px;
	border:none;
	height:24px;
	font-size:20px;
	padding:0 10px;
	display:inline-block;
}
nav ul#nav form input[type=submit]{
	display:none;
}
nav ul#nav li:hover form, nav ul#nav li:focus form, nav ul#nav li form:focus{
	margin-left:0px;
	padding-left:0;
}
nav #bg_desc {
	border-bottom: 2px solid rgba(0,128,128,.2);
}
nav h2{
	margin-top:15px;
	margin-bottom:5px;
	color:var(--blog);
	font-weight:bold;
}
nav p{font-size:16px;margin-top:10px;margin-bottom:25px;}
nav #bg_desc  p{
	display:block;
	margin: 0 0 15px 60px;
	color:#000;
	font-family:"Snippet", tahoma, arial,helvetica,sans-serif;
}
nav #bg_desc p:before{
	float:left;
	content:"";
	display:block;
	background:url(https://portfolio.thomas-daveluy.fr/public/.carre2_s.jpg) no-repeat center;
	background-size:contain;
	width:50px;
	height:50px;
	margin-left:-60px;
}
nav p a{
	display:inline-block;
	font-size:18px;
	margin-top:10px;
	color:var(--blog)
}
nav p a:last-child{
	margin-left:10px;
	padding-left:10px;
	margin-top:7px;
	border-left:1px solid #ccc;
}
nav ul#cat{
	padding:0;list-style:none;
	margin-top:5px;
}
nav ul#cat li{
	display:inline-block;
	font-size:17px;
	margin:0 4px 5px 0;
}
nav ul#cat li a{
	display:block;
	color:#fff;
	background:var(--blog);
	padding:4px 12px;
	border-radius:25px;
	transition:all 0.25s;
	opacity:.5;
}
nav ul#cat li a:hover{
	opacity:1;
}


#page .post-content{
	overflow:hidden;
}
.scroll #page{
	/*! margin-top:150px; */
}
#page .post-info{
	color:#fff;
	background:var(--blog);
	display:inline-block;
	vertical-align:top;
	margin-left:-50px;
	margin-bottom:-100px;
	width:60px;
	height:auto;
	max-height:60px;
	text-shadow:0 0 2px #999;
	font-family:Snippet, tahoma, arial,helvetica,sans-serif;
	text-align:center;
	overflow:hidden;
	transition:all 0.4s;
}
#page .post-info:hover{
	height:auto;
	max-height:120px;
}
#page .post-info p{
	margin-bottom:0;
}
#page .post-info .date-d{
	display:block;
	font-size:38px;
	line-height:28px;
	margin-top:-7px;
}
#page .post-info .date-m{
	display:block;
	font-size:20px;
	line-height:30px;
	margin-top:-5px;
}
#page .post-title{
	display:inline-block;
	margin:0 -40px 0 -4px;
	padding:0;
	vertical-align:top;
	width:calc(100% + 28px);
}
#page .post-title h2{
	display:block;
	margin:0 0 5px 0;
	padding-left:15px;
	font-size:34px;
	font-weight:normal;
	border-bottom:2px solid rgba(0,128,128,.1);
	width:100%;
}
#page .post-title h2 a{
	color: var(--blog);
}
#page .post-title h2 a:hover{
	color: #000;
}
#page .post-title p{
	padding-left:15px;
	margin:0;
}
#page .post-content blockquote{
	font-style:italic;
	font-family:times,times-new-roman, times new roman, serif;
	margin:30px 0 30px 25px;
	font-size:16px;
	position:relative;
	min-height:50px;
}
#page .post-content hr{
	border:none;
	border-top:1px solid #ccc;
	margin:40px 0;
}
#page .post-content blockquote:before, #page .post-content blockquote:after{
	content:"‘‘";
	font-size:100px;
	position:absolute;
	top:20px;
	left:-52px;
	height:0;
	letter-spacing: -8px;
	text-align: left;
	color:#000;
	opacity:0.25;
}
#page .post-content blockquote:before{
	content:"’’";
	left:auto;
	top:auto;
	bottom:-5px;
	right:25px;
	margin:0;
	width:25px;
	z-index:0;
}
#page .post-content, #page .post-excerpt{
	background:#fff;
	width:100%;
	padding:10px 20px 20px;
	border-radius:12px;
	box-shadow:0px 6px 6px rgba(0,96,96,.2);
	font-size:18px;
	margin-bottom:120px;
	margin-top:20px;
	color:#000;
}
#page .post-excerpt{
	padding-top:20px;
	margin-top:20px;
	min-height:40px;
	margin-bottom:80px;
}
#page .post-excerpt img{float:left;margin:0 10px 5px 0;}
#page .post-content img{max-width:100%;}
#page .post-excerpt iframe, #page .post-content iframe,
#page .post-excerpt video, #page .post-content video{aspect-ratio: 16/9;}
#page .post-excerpt iframe.square, #page .post-content iframe.square,
#page .post-excerpt video.square, #page .post-content video.square{aspect-ratio: 4/3;}
#page .post-excerpt .more{
	text-align:center;
	display:inline-block;
	margin-top:2px;
	background:var(--blog);
	padding:4px 20px;
	float:right;
	border-radius:30px;
	color:#fff;
	text-transform: uppercase;
	font-size:18px;
	line-height:26px;
}

#navlinks{
	margin-top:-50px;
	width:calc(100% + 40px);
	padding-bottom:30px;
}

#navlinks span a{
	color:#fff;
	display:inline-block;
	background:var(--blog);
	border:2px solid var(--blog);
	padding:2px 15px 2px 10px;
	border-radius:30px;
	height:28px;
	line-height:30px;
	margin-left:0;
	font-size:18px;
	transition:all .25s;
}
#navlinks span:last-child a{
	float:right;
	padding:2px 10px 2px 15px;
}
#navlinks span a:before{content:"◄";margin-right:10px;}
#navlinks span:last-child a:before{content:"";display:none;margin:0;}
#navlinks span:last-child a:after{content:"►";margin-left:10px;}
#navlinks span a:hover{
	background:transparent;
	color:var(--blog);
}

#content-info{
	margin-left:-20px;
	margin-bottom:55px;
}
#content-info h2{
	margin:0;
	padding:0;
	height:50px;
	line-height:50px;
	font-size:34px;
}
#content-info h2:before{
	content:"";
	display:inline-block;
	vertical-align:top;
	background: url(https://thomas-daveluy.fr/scripts/pictures/search.svg) no-repeat center rgba(0,128,128,.1);
	background-size:30px;
	height:50px;
	width:49px;
	font-size:34px;
	line-height:50px;
	margin-right:15px;
}
.dc_archive #content-info h2:before{
	background-image: url(img/archive.svg);
}
.dc_cat #content-info h2:before{
	
	background: rgba(0,128,128,.1);
	
}
#content-info p{
	margin-left:65px;
	margin-top:0;
}


footer{
font-size:16px;
	margin-top:50px;
	padding:20px;
}
footer ul{padding:0;margin:0;list-style:none;}
footer p{margin:0 0 10px;}
footer li{
	display:inline-block;
	border-left:1px solid #ccc;
	margin-left:5px;
	padding-left:8px;
}
footer li:first-child{
	border-left:none;
	margin-left:0;
	padding-left:0;
}


@media screen and (max-width:1440px) {
	
	#page{
	border-left:2px solid rgba(0,128,128,.1);
	max-width:960px;
	width:calc(75% - 160px);
	padding:0 20px;
	margin-left:20px;
	transform: none;
}
	#page .post-info {
  margin-left: -30px;
}
	#page .post-title {
  margin: 0 -40px 0 -4px;
  padding: 0;
  vertical-align: top;
  width: calc(100% - 8px);
}
	nav {
  width: 25%;
		max-width:280px;
}
	
	
}


@media screen and (max-width: 940px) {
  #nav_right {
		top:46px;
    display: flex;
		justify-content: flex-end;
  }
	nav{
		/*TODO ?*/
		display:none;
	}
	
	#page{
	border-left:none;
	width:calc(100% - 80px);
	margin-left:0px;
}
	#page .post-info { margin-left: 0px; }
	#page .post-title {
    width: calc(100% - 40px);
  }
}




 @media screen and (max-width:600px) {
	 /*header, .scroll header{top:0;left:0;right:0;margin:15px 0;width:100%;}
	 header h1, .scroll header h1{
		 font-size:34px;
		 text-align:left;
		 border-bottom:1px solid #ccc;
		 margin:0 15px;
		 padding-bottom:12px;
	 }
	 header p, .scroll header p{
		 display:none;
	 }*/
	 #page, .scroll #page{
		 width:99.5%;
		 padding:0;
		 margin:0;
		 overflow:hidden;
	 }
	 #page .post{background:#fff;}
	 #page .post-info{
		 margin:10px;
	 }
	 #page .post-title{
		 width:calc(100% - 110px);
		 vertical-align:top;
		 margin-top:10px;
	 }
	 #page .post-title h2, #page .post-title p{
		 padding-left:0;
	 }
	 #page .post-content{
		 border-radius:0;
		 width:96%;
		 padding:10px 2%;
		 margin-bottom:80px;
		 margin-top:0;
	 }
	 
	 #page .post-excerpt{
		 width:94%;
		 
	 }
	 #content-info{
	margin-left:10px;
	margin-bottom:55px;
}/*
nav,nav:hover, nav:focus{right:-320px;}
nav.menu{right:0;}
	 
	 nav #menu-mobile{
	 display:block;
		 position:fixed;
		 top:5px;
		 right:10px;
		 width:60px;
		 padding:0;
		 height:60px;
		 cursor:pointer;
		 opacity:1;
		 border-radius:30px;
		 transition: all 0.35s;
		 background:rgba(255,255,255,.2);
		 backdrop-filter:blur(15px);
	 }
	 nav.menu #menu-mobile{
		 top:-50px;
		 right:320px;
		 width:calc(100% - 380px);
			 border-radius:0;
		 height:100%;
		 padding:50px;
		 box-shadow:0 0 10px #ccc inset;
		 backdrop-filter:blur(100px);
	 }
	 nav #menu-mobile:after, nav #menu-mobile:before{
	 content:"";
		 display:block;
		 position:fixed;
		 margin:10px;
		 margin-top:15px;
		 border-top:5px solid #000;
		 border-bottom:5px solid #000;
		 width:40px;
		 height:19px;
		 transition: all 0.35s;
		 opacity:.5;
	 }
	 nav #menu-mobile:before{
	 margin-top:8px;
		 border-top:none;
	 }
	 nav.menu #menu-mobile:after, nav.menu #menu-mobile:before{
		 margin-top:37px;
		 height:0px;
		 transform:rotate(-45deg);
		 opacity:.7;
	 }
	 nav.menu #menu-mobile:after{
		 transform:rotate(45deg);
		 border-bottom:0px solid rgba(0,0,0,0);
	 }	*/
	 
	 #navlinks {
  padding:0 10px 30px;
}
}


@media screen and ((max-width: 720px) or (max-height: 440px)) {
  .burger #nav_right, .home .burger #nav_right {
    top:100svh;
		justify-content: flex-start;
		align-items: flex-start;
		/*! border:1px solid; */
		flex-direction: column;
		height:85px;
  }
	
	#nav_right form, #nav_right form:hover, #nav_right form:focus-within{
  margin:10px 0 0 0;
	width:calc(100% - 24px);
		max-width:260px;
	background:#fff;
}
#nav_right form label{
	width:42px;
	background-position:8px 4px;
	filter:brightness(.6) invert(1) sepia(1) saturate(10) hue-rotate(180deg);
}
#nav_right form input[type=text], #nav_right form:hover input[type=text], #nav_right form:focus-within input[type=text]{
	width:calc(100% - 112px);
	transition-delay:.75s;
}
}