@charset "utf-8";

@media (max-width: 850px) {

	#subnav {
		display: block;
		text-align: center;
	}

	body {
		padding-top: 0;
	}

	/* TOP
	------------------------------------------------------*/
	#top {
		padding: 8px;
	}

	#titre-page {
		font-size: 1.2em;
		flex: 99 99 auto;
	}

	/* icon sizes */
	#hide-side-nav:before,
	#nav-acc::before {
		width: 36px;
		line-height: 36px;
	}

	#titre-page {
		flex: 1 100 auto;
	}

	#search {
		flex: 0 1 auto;
		justify-content: right;
		background-color: transparent;
		margin: 0 0px 0 0;
		min-width: 36px;
	}

	#q {
		width: 0px;
		position: static;
		flex: 0 1 0px;
		max-width: none;
	}

	#search #q + #label_q {
		flex-basis: 36px;
	}

	#search #q:focus,
	#search #q:not(:placeholder-shown) { 
		margin-left: 0;
		width: calc( 100% - 48px);
		flex: 1 1 100%;
		background: rgba(0, 0, 0, .1);
	}

	#search #q:focus + #label_q,
	#search #q:not(:placeholder-shown) + #label_q { 
		background: rgba(0, 0, 0, .1);
		flex-basis: 48px;
	}

	#nav-acc > ul::before {
		right: 10px;
	}

}

@media (max-width: 700px) {
	#header {
		position: relative;
	}
	#titre-page > a {
		display: inline;
	}

	#axe {
		padding: 10px 2px;
	}

	.button-delete, .button-submit, .button-cancel {
		min-width: 0;
		padding: 5px;
	}

	/* comms */
	.commentbloc {
		flex-direction: column;
	}

	.commentbloc > .comm-side-icon {
		flex: 0 0 auto;
		z-index: 1;
	}

	.commentbloc .webpage a,
	.commentbloc .email a,
	.commentbloc .reply {
		opacity: 1;
	}

	.commentbloc .comm-options,
	.commentbloc .webpage a,
	.commentbloc .email a,
	.commentbloc .reply {
		visibility: visible;
	}

	.commentbloc .comm-side-icon .date {
		font-size: .6em;
	}

	.commentbloc .comm-content blockquote {
		margin: auto 5px;
	}

	.commentbloc .comm-header {
		flex-flow: wrap;
	}

	.commentbloc .comm-header .link-article {
		order: 1;
		text-align: left;
		flex: 100%;
	}


}