@keyframes fade_in {
	0%	{ opacity: 0; }
	100%	{ opacity: 1; }
}
html,
body{
	min-width: 320px;
	height: 100%;
	margin: 0;
	background: #eee;
	font-family: Corbel, sans-serif;
}
#index {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
a {
	display: inline-block;
	color: #0e5779;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	color: #09364b;
}
.img {
	margin: 8px 16px 0 0;
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 4px;
	display: inline-block;
	float: left;
	background: rgba(255,255,255,0.5);
	box-shadow: 0 0 1px #000, 0 0 12px rgba(0,0,0,0.2);
	color: #444;
	animation: fade_in 3s;
}
.img img {
	box-sizing: border-box;
	display: block;
	background: #ddd;
	font-size: 12px;
	font-style: italic;
	text-shadow: 0 1px 0 #fff;
}
.img em {
	padding: 4px;
	position: relative;
	top: 4px;
	display: block;
	font-size: 14px;
	text-align: center;
}
h1 {
	margin: 8px;
	overflow: hidden;
	font-size: 0;
	text-indent: -999px;
}
#assact {
	height: 50%;
	background: radial-gradient(circle, rgba(0,0,0,0) 80%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.4)), url('images/bg_0_index.jpg') center center fixed;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
#assact h1 {
	width: 60%;
	height: 60%;
	background: url("images/Logo_Graphique.svg") center center no-repeat;
	background-size: contain;
}
#intro {
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-grow: 1;
}
#intro>div {
	box-sizing: border-box;
	min-width: 192px;
	width: 50%;
	padding: 16px;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	color: #fff;
	text-transform: uppercase;
	transition: width 0.5s;
}
#intro:hover>div {
	width: 20%;
}
#intro>div:hover {
	width: 80%;
	color: #262626;
	text-transform: uppercase;
	text-shadow: 0 0 8px rgba(0,0,0,0.5);
}
#intro h2 {
	margin: 0 8px 0 16px;
	text-shadow: 0 0 8px rgba(0,0,0,0.5);
}
#intro>div ul {
	margin: 0;
	display: none;
	position: relative;
	z-index: 1;
	list-style: none;
	font-size: 14px;
}
#intro>div:hover ul {
	display: block;
}
#intro ul a {
	padding: 4px 8px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 0 8px rgba(14,87,121,0.5);
}
#intro ul a:hover {
	padding: 4px 0 4px 16px;
}
#intro_association {
	background: linear-gradient(rgba(14,87,121,0.5), #0e5779), url('images/bg_0_index_blur.jpg') center center fixed;
	background-size: cover;
}
#intro_association::before {
	content: '';
	width: 10vw;
	height: 10vw;
	background: url('images/icon_association.svg') center center no-repeat;
}
#intro_association:hover::before {
	width: 25vw;
	height: 25vw;
	background: url('images/icon_association_c.svg') center center no-repeat;
}
#intro_publication {
	background: linear-gradient(rgba(38,38,38,0.5), #262626), url('images/bg_0_index_blur.jpg') center center fixed;
	background-size: cover;
}
#intro_publication::before {
	content: '';
	width: 10vw;
	height: 10vw;
	background: url('images/icon_publications.svg') center center no-repeat;
}
#intro_publication:hover::before {
	background: url('images/icon_publications_c.svg') center center no-repeat;
	width: 25vw;
	height: 25vw;
}
#intro>div:hover {
	background: linear-gradient(rgba(255,255,255,0.5), #fff), url('images/bg_0_index_blur.jpg') center center fixed;
	background-size: cover;
}
#intro>div>a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

#header {
	width: 100%;
	height: 128px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	background: linear-gradient(#fff 50%, rgba(255,255,255,0.95));
	 0 0 8px rgba(0,0,0,0.1);
}
#header h1 {
	flex-grow: 1;
	background: url("images/Logo_Typographique.svg") 32px center no-repeat;
}
#header h1 a {
	width: 288px;
	height: 80px;
	margin: 16px 32px;
	display: block;
}
#header nav {
	display: flex;
	align-items: center;
}
#header nav ul {
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
}
#header nav a {
	padding: 4px 8px;
	display: block;
}
#header #nav_site {
	padding: 8px;
	border-right: solid 1px #ccc;
	font-size: 16px;
	text-align: right;
	line-height: 24px;
	color: #ccc;
}
#header #nav_site a:hover {
	padding: 4px 0 4px 16px;
}
#header #nav_page {
	min-width: 96px;
	padding: 0 0 0 16px;
	font-size: 11px;
}
#header #nav_page a:hover {
	padding: 4px 16px 4px 0;
}
#header #nav_page span{
	padding: 4px 16px 4px 0;
}
#menuTarget {
	padding: 4px 2px;
	position: absolute;
	top: 0;
	left: 0;
	color: #ccc;
	transition: 0.3s;
}
#menuTarget::before {
	content: '►';
}

section {
	box-sizing: border-box;
	min-height: 100%;
	padding: 200px 32px 32px;
	position: relative;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #eee;
	box-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 16px rgba(0,0,0,0.3);
}
section:nth-child(2n) {
	background: #ddd;
}
section h2 {
	margin: 146px 32px 0;
	position: absolute;
	top: 0;
	left: 0;
	text-transform: uppercase;
	font-size: 32px;
	color: #262626;
	white-space: nowrap;
	text-shadow: 0 0 8px rgba(0,0,0,0.3);
	transition: 0.3s;
}
section #title {
	margin: 32px 0 0 16px;
	font-size: 80px;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0,60,80,0.5), 0 0 16px rgba(0,30,40,0.5);
}
section h3 {
	margin: 16px 8px 8px;
	font-size: 20px;
}
section>p {
	margin: 0 0 16px;
	font-size: 20px;
}
.fiche {
	width: 200px;
	margin: 16px;
	padding: 4px 8px;
	border-radius: 4px;
	position: absolute;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.5);
}
.fiche h3 {
	margin: 0;
	padding: 4px;
	border-bottom: dotted 1px rgba(0,0,0,0.5);
	text-align: center;
}
.fiche dt {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #0e5779;
}
.fiche dd {
	color: #262626;
}


/*	ASSOCIATION	*/

#association {
	background: #0e5779 url("images/bg_1-1_association.jpg") center center no-repeat fixed;
	background-size: cover;
}

#a_propos {
	background: linear-gradient(rgba(255,255,255,0.8),#fff) fixed, url(images/bg_1-2_a_propos.jpg) center center fixed;
	background-size: cover;
}
#a_propos p {
	font-size: 20px;
	text-align: justify;
}
#lire_statuts {
	height: 32px;
	padding: 4px 16px;
	border-radius: 4px;
	position: absolute;
	display: flex;
	align-items: center;
	top: 136px;
	right: 8px;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

#equipe {
	background: linear-gradient(rgba(17,17,17,0.8),#111) fixed, url(images/bg_1-3_notre_equipe.jpg) center center fixed;
	background-size: cover;
}
#equipe>h2 {
	color: #fff;
}
#equipe>ul {
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#equipe>ul>li {
	box-sizing: border-box;
	width: 256px;
	height: 320px;
	margin: 4px;
	padding: 2px 8px;
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	list-style: none;
	transition: 0.3s;
}
#equipe>ul>li:hover {
	color: #fff;
	background: #262626;
}
#equipe>ul>li>h3 {
	margin: 0;
	padding: 8px 0;
	font-size: 16px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.3s;
}
#equipe>ul>li>div {
	content: '';
	width: 256px;
	height: 256px;
	margin: 0 -8px;
	overflow: hidden;
	transition: 0.3s;
}
#equipe>ul>li:hover>div {
	height: 96px;
}
#equipe>ul>li>div>img {
	transition: 0.3s;
	display: block;
}
#equipe>ul>li:hover>div>img {
	margin: -64px 0 0;
	transition: 0.3s;
	transform: scale(1.2);
}
#equipe>ul>li>h4 {
	margin:  4px -8px;
	padding: 0 8px 4px;
	border-bottom: dotted 1px #fff;
	font-size: 16px;
	text-align: center;
}
#equipe>ul>li>p {
	margin: 4px 0;
	font-size: 14px;
}
#equipe>ul>li>p>a {
	color: #347d9f;
	text-shadow: 0 0 0 #347d9f;
}
#equipe>ul>li>p>a:hover {
	color: #5effff;
	text-shadow: 0 0 4px #42d4ff;
}
#equipe>ul>li>p {
	height: 0;
	padding: 0px 8px;
	overflow: hidden;
	text-align: justify;
	hyphens: auto;
	transition: 0.3s;
}
#equipe>ul>li:hover>p {
	height: 150px;
	margin: 6px 0 0 0;
	overflow: auto;
}

#partenaires {
	background: linear-gradient(rgba(255,255,255,0.8),#fff) fixed, url("images/bg_1-4_partenaires.jpg") center center fixed;
	background-size: cover;
}
#partenaires>ul {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
#partenaires>ul>li {
	box-sizing: border-box;
	width: 240px;
	margin: 8px;
	padding: 0;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.5);
}
#partenaires>ul>li h3 {
	margin: 0 0 16px;
	padding: 0 16px;
	font-size: 17px;
	line-height: 16px;
}
#partenaires h3::before {
	content: '';
	width: 240px;
	height: 96px;
	margin: 0 -16px;
	display: block;
	background-size: 100%;
	transition: 0.3s;
}
.FAS h3::before {	background: url('images/logos/FAS.png') center center no-repeat;}
.AASGO h3::before {	background: url('images/logos/AASGO.png') center center no-repeat;}
.AFGE h3::before {	background: url('images/logos/AFGE.png') center center no-repeat;}
.AFTI h3::before {	background: url('images/logos/AFTI.png') center center no-repeat;}
.AG2S h3::before {	background: url('images/logos/AG2S.png') center center no-repeat;}
.AMF h3::before {	background: url('images/logos/AMF.png') center center no-repeat;}
.ANSA h3::before {	background: url('images/logos/ANSA.png') center center no-repeat;}
.APAI h3::before {	background: url('images/logos/APAI.png') center center no-repeat;}
.APAT h3::before {	background: url('images/logos/APAT.png') center center no-repeat;}
.ASRAS h3::before {	background: url('images/logos/ASRAS.png') center center no-repeat;}
.EAS h3::before {	background: url('images/logos/EAS.png') center center no-repeat;}
.F2IC h3::before {	background: url('images/logos/F2IC.png') center center no-repeat;}
.LFPT h3::before {	background: url('images/logos/la_finance_pour_tous.png') center center no-repeat;}

#partenaires>ul>li:hover h3::before {
	background-size: 110%;
}
#partenaires>ul>li>div {
	height: 200px;
	padding: 0 16px;
	overflow: hidden;
	flex-grow: 1;
	font-size: 13px;
	text-align: justify;
	hyphens: auto;
}
#partenaires>ul>li:hover>div {
	overflow: auto;
}
#partenaires>ul>li p {
	margin: 0 0 8px;
}
#partenaires>ul>li ul {
	padding: 0 0 0 8px;
}
#partenaires>ul>li:hover>.scrollP {
	overflow: hidden;
}
#partenaires li>span {
	width: 100%;
	position: absolute;
	text-align: center;
	color: #0e5779;
	text-shadow: 0 1px 1px #fff;
}
#partenaires li>span:hover {
	background: #4af;
	color: #fff;
	text-shadow: 0 -1px 8px #0e5779;
	cursor: pointer;
}
#partenaires span:nth-last-child(2) {
	padding: 4px 0 16px;
	top: 0;
	background: linear-gradient(#fff, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0));
}
#partenaires span:nth-last-child(1) {
	padding: 16px 0 4px;
	bottom: 0;
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.8) 50%, #fff);
}

#contact {
	background: url("images/bg_1-5_paris.png") 0 0 no-repeat fixed;
}
.metro, .m_3, .m_9, .m_12, .m_13, .m_14, .rer , .rer_e, .ter, .ter_j, .ter_l {
	width: 16px;
	height: 16px;
	overflow: hidden;
	display: inline-block;
	font-size: 0;
	text-indent: -999px;
	background: url("images/transports.svg");
}
.metro	{	background-position: -2px -2px;}
.m_3	{	background-position: -62px -2px;}
.m_9	{	background-position: -222px -2px;}
.m_12	{	background-position: -282px -2px;}
.m_13	{	background-position: -302px -2px;}
.m_14	{	background-position: -322px -2px;}
.rer	{	background-position: -2px -22px;}
.rer_e	{	background-position: -102px -22px;}
.ter	{	background-position: -2px -42px;}
.ter_j	{	background-position: -42px -42px;}
.ter_l	{	background-position: -82px -42px;}

/*	PUBLICATIONS	*/

section#publications {
	background: #262626 url("images/bg_2-1_publications.jpg") center center no-repeat fixed;
	background-size: cover;
}
section#publications .fiche{
	text-align: center;
}
section#publications .fiche h3 {
	margin: 0 0 8px;
}
section#publications .fiche img{
	width: 192px;
}
section#publications .fiche p {
	margin: 0;
}
section#actualites {
	flex-direction: row;
	background: linear-gradient(rgba(255,255,255,0.8),#fff) fixed, url("images/bg_2-2_actualites.jpg") center center fixed;
	background-size: cover;
}
section#actualites>div {
	max-height: 800px;
	overflow: hidden;
	position: relative;
}
section#actualites>div::after {
	content: '';
	width: 100%;
	height: 32px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(rgba(238,238,238,0), #eee);
}
section#actualites ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
section#actualites li {
	overflow: hidden;
	transition: 0.5s;
}
section#actualites li a,
section#archives li a,
section#archives>p {
	box-sizing: border-box;
	margin: 4px 0;
	padding: 16px;
	border-radius: 4px;
	position: relative;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
section#actualites li a:hover,
section#archives li a:hover {
	background: #fff;
}
section#actualites h4,
section#archives h4 {
	margin: 0 -12px 6px;
	border-bottom: dotted 2px #888;
	font-size: 18px;
	line-height: 18px;
}
section#actualites a>p,
section#archives a>p {
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: dotted 2px #888;
	color: #000;
	font-family: Courier, monospace;
	font-size: 17px;
	text-align: justify;
	hyphens: auto;
}
section#actualites a:hover>p,
section#archives a:hover>p {
	color: #09364b;
}

section#actualites h4 {
	padding: 0 76px 8px 12px;
}
section#actualites a>em {
	width: 64px;
	padding: 6px 8px;
	position: absolute;
	top: 0;
	right: 0;
	font-family: Courier, monospace;
	font-size: 10px;
	line-height: 10px;
	font-style: normal;
	text-align: right;
	color: #888;
}

section#archives {
	background: linear-gradient(rgba(255,255,255,0.8),#fff) fixed, url("images/bg_2-3_archives.jpg") center center fixed;
	background-size: cover;
}
section#archives>div {
	width: 100%;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
section#archives>div>span {
	height: 100%;
	padding: 0 16px;
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	color: #0e5779;
	text-shadow: 0 1px 1px #fff;
}
section#archives>div:hover>span:hover {
	background: #4af;
	color: #fff;
	text-shadow: 0 -1px 8px #0e5779;
	cursor: pointer;
}
section#archives>div>span:nth-child(1) {
	background: linear-gradient(-90deg, #fff, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0));
}
section#archives>div>span:nth-child(2) {
	background: linear-gradient(90deg, #fff, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0));
}
section#archives ul {
	margin: 0 -32px 0 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	display: flex;
	white-space: nowrap;
}
/*section#archives ul::after {
	content: '';
	width: 32px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}*/
section#archives li {
	display: flex;
	white-space: normal;
}
section#archives li a {
	min-width: 320px;
	text-align: center;
}
section#archives h4 {
	min-height: 64px;
	margin: 0 0 16px;
	padding: 8px 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-family: sans-serif;
	line-height: 120%;
	text-transform: uppercase;
}
section#archives img {
	border-radius: 4px;
	box-shadow: 0 0 2px rgba(0,0,0,0.05), 0 0 8px rgba(0,0,0,0.05);
}

/*	ÉDITION	*/

#edition>section {
	overflow: visible;
}
#edition textarea,
#edition select,
#edition input {
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	border: none;
	border-radius: 3px;
	display: block;
	font-size: 20px;
	transition: 0.3s;
}
#edition textarea,
#edition select,
#edition input[type="text"],
#edition input[type="password"],
#edition input[type="file"] {
	padding: 8px;
	background: #f7f5f0;
	box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
	text-shadow: 0 1px #fff, 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2);
}
#edition textarea:hover,
#edition select:hover,
#edition input[type="text"]:hover,
#edition input[type="password"]:hover {
	background: #f2eee4;
}
#edition textarea {
	overflow-y: auto;
}
#edition select {
	border: solid 1px #c2bbaa;
}
#edition input[type="file"] {
	cursor: pointer;
}
#edition input[type="file"]:hover {
	background: #f7d88b;
}
#edition input[type="submit"] {
	padding: 16px;
	background: linear-gradient(#fff, #eee);
	color: #444;
	box-shadow: 0 0 1px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.1);
	cursor: pointer;
}
#edition input[type="submit"]:hover {
	background: linear-gradient(90deg, #fcfbfa, rgba(0,0,0,0) 2%, rgba(0,0,0,0) 98%, #fcfbfa), linear-gradient(#e5e4e4, #fcfbfa);
}
#edition hr {
	display: block;
	margin: 16px 0;
	border: none;
	border-top: dotted 3px rgba(0,0,0,0.6);
}
#edition #connect>form {
	width: auto;
	margin: 8px auto 15vh;
	padding: 8px 40px;
	border-radius: 4px;
	flex-grow: unset;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,.1), 0 0 8px rgba(0,0,0,.1);
}
#edition h3 {
	margin: 4px 0 12px;
}
#edition #membres {
	position: relative;
}
#edition #membres>.ajouter {
	margin: 8px 0;
	padding: 4px 24px;
	border: solid 1px;
	border-radius: 3px;
	position: absolute;
	bottom: 100%;
	right: 0;
	background: linear-gradient(#fff, #eee);
	font-size: 24px;
	line-height: 20px;
}
#edition #membres>ul {
	margin: -8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
#edition fieldset,
#edition #membres>ul>li {
	box-sizing: border-box;
	width: 100%;
	margin: 8px;
	padding: 4px 8px 0;
	border: none;
	border-radius: 4px;
	position: relative;
	display: inline-block;
	flex: 1 0 320px;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
	transition: 0.3s;
	animation: fade_in 2s;
}
#edition #membres .grip {
	height: 16px;
	margin: 4px 36px 4px 0;
	padding: 8px;
	border-radius: 3px;
	display: block;
	background: url('images/grip.png');
	opacity: 0.05;
	cursor: move;
}

#edition #membres>ul>li>.supprimer {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 4px;
	border: solid 2px;
	border-radius: 50%;
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 20px;
	font-weight: bold;
	line-height: 10px;
	text-align: center;
}
#edition #membres>ul>li>.supprimer:hover {
	color: #602;
}
#edition #membres>ul>li>textarea {
	box-sizing: border-box;
	padding: 4px 8px;
	resize: vertical;
	font-size: 16px;
}
#edition #membres>ul>li>.personne {
	padding: 0 96px 0 0;
	position: relative;
}
#edition #membres>ul>li>.personne>img {
	max-width: 88px;
	max-height: 88px;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 50%;
}
#edition #archives {
	display: flex;
}
#edition #archives>ul {
	max-height: 76vh;
	margin: 8px 8px 8px 0;
	padding: 8px;
	border-radius: 4px;
	overflow: auto;
	list-style: none;
	background: #333;
}
#edition #archives>ul>li>span,
#edition #archives>ul>li>a {
	padding: 2px 8px;
	border-radius: 2px;
	display: block;
	color: #fff;
}
#edition #archives>ul>li>a:hover {
	background: #0e5779;
}
#edition #archives>ul>li>span {
	background: #fff;
	text-align: center;
	color: #0e5779;
}
#edition #archives>form {
	flex-grow: 1;
}
#edition #archives textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 4px 8px;
}
#edition .bottom_button {
	margin: 0 -8px;
	padding: 16px 8px;
	position: sticky;
	bottom: 0;
	background: linear-gradient(rgba(0,0,0,0), #eee 10%);
}
#edition .bottom_button>input {
	padding: 32px;
}
footer {
	width: 100%;
	padding: 4px;
	position: fixed;
	bottom: 0;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,0.5);
}

@media screen and (max-width: 640px) {
	#assact {
		height: 40%;
	}
	#intro {
		flex-direction: column;
	}
	#intro>div {
		width: auto;
		height: 50%;
		transition: height 0.5s;
	}
	#intro>div {
		flex-direction: column;
	}
	#intro:hover>div {
		width: auto;
		height: 20%;
	}
	#intro>div:hover {
		width: auto;
		height: 80%;
	}
	#header h1 {
		background: url("images/Logo_Graphique.svg") 0 center no-repeat;
		background-size: contain;
	}
	section>p {
		margin: 0 0 12px;
		font-size: 16px;
	}
	section #title {
		margin: 20px 0 0 20px;
		font-size: 40px;
	}
	.img {
		margin: 8px 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		float: unset;
	}
	section#actualites {
		flex-direction: column;
	}
	section#actualites>div {
		max-height: 400px;
	}
	section#actualites h4, section#archives h4 {
		font-size: 14px;
	}
	section#actualites a>p, section#archives a>p {
		font-size: 11px;
	}
	footer {
		font-size: 70%;
	}
}

.debug {
	margin: 8px;
	padding: 8px 16px;
	border-radius: 3px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background: rgba(0,0,0,0.9);
	box-shadow: 0 0 2px  rgba(0,0,0,0.1), 0 0 16px  rgba(0,0,0,0.1);
	font-family: monospace;
	color: #fff;
}
@keyframes logs {
	0%	{ left: -100%; }
	5%	{ left: 0; }
	95%	{ left: 0; }
	100%	{ left: -100%; }
}
.logs {
	max-width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: -100%;
	list-style: none;
	/*pointer-events: none;*/
	animation: 8s logs;
}
.logs>li {
	margin: 4px;
	padding: 8px 16px;
	border-radius: 3px;
	background: rgba(0,0,0,0.9);
	box-shadow: 0 0 2px  rgba(0,0,0,0.1), 0 0 16px  rgba(0,0,0,0.1);
	font-family: monospace;
	color: #fff;
}
.logs>.good_log	{ background: rgba(176,208,0,0.95);}
.logs>.bad_log	{ background: rgba(192,8,16,0.95);}
.logs>.good_log::before {
	content: '☑';
	padding: 0 12px 0 0;
}
.logs>.bad_log::before {
	content: '×';
	padding: 0 12px 0 0;
}