:root{
	--fontSize: 1.3em;
	--bodyBG: #1b1b1b;
	--maxWidth: 1280px;
	--contentBG: rgba(129, 129, 129, 0.36);
	--contentFG: #d1d1d1;
	--titleColor: #ffffff;
	--borderRadius: 2em;
	--accentColor: #c53131;
	--accentColorLight: #c75959;
}

/**********************************
 Layout général
**********************************/
html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif, Helvetica, sans-serif;
	font-size: var(--fontSize);
	color: var(--contentFG);
	background-color: var(--bodyBG);

	width: 90%;
	max-width: var(--maxWidth);
	margin: 0 auto;
}
#background{
	background: url(../photos/repik-en-lutte.jpg) no-repeat center center;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	z-index: -1;
}
a {
	color: var(--accentColorLight);
}
a:hover {
	text-decoration: none;
}
h2{
	margin-block-end: -0.5em;
	margin-block-start: 1.3em;
}
/**********************************
 Header
**********************************/
header {
	display: flex;
	flex-direction: column;
	padding-bottom: 2em;
}
h1 a{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
}
h1 img{
	width: 60%;
}
@media (max-width: 750px) {
	h1 img{
		width: 100%!important;
	}
}

ul.titleLinks{
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5em;
	row-gap: 0.2em;
	justify-content: flex-end;
	align-items: center;
	margin: 0;
	font-size:1.5em;
	text-transform: uppercase;
	padding: 0;

	list-style: none outside none;
	text-align: right;
}
ul.titleLinks a{
	text-decoration: none;
	color: var(--accentColor);
}
ul.titleLinks a:hover{
	text-decoration: underline;
}
ul.titleLinks li.sel{
	color: var(--accentColor);
	text-decoration: underline;
}


/**********************************
 Home HEAD.
 Image/Logo de l'accueil
**********************************/
#homeHead{
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
}

#homeHead img{
	width: 100%
}
#homeHead img.logo{
	width: 70%;
	max-width:900px;
	position: absolute;
	margin-top: 25%;
}
@media (max-width: 1600px) {
	#homeHead img.logo{
		margin-top: 30% !important;
	}
}

/**********************************
 Zone de contenu
**********************************/
#content{
	border-radius: var(--borderRadius);
	background-color: var(--contentBG);
	padding: 1em;
	margin-top: 2em;
	margin-bottom: 3em;
}


img.inline{
	height: 1em;
	margin-bottom: -0.2em;
}

.iframePeerTubeContainer{
	position: relative;
	padding-bottom: 56%;
	height: 0;
	overflow: hidden;
}
iframe{
	border: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
audio{
	max-width: 90%;
	width: 25em;
}
/**********************************
 Gallery
**********************************/
.gallery{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 1em;
}
.gallery::after{
	content:"";
	width: 18em
}
.gallery img{
	height: 15em;
	cursor: pointer;
}
@media (max-width: 750px) {
	.gallery img{
		width: 100%;
		height: auto;
	}
	dialog div.desc{
		margin: 0 1em !important;
	}
}
body.hasModal{
	overflow: hidden;
}
dialog{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	max-width: var(--maxWidth);
	display: flex;
	flex-direction: column;
	background-color: rgba(0, 0, 0, 0.95);
	color: var(--contentFG);
	border: none;
	overflow-y: auto;
}
dialog div.head{
	margin: 1em 2em ;
	display: flex;
	flex-direction: row-reverse;
}
dialog img{
	max-height: 80%;
	max-width: 100%;
	margin: auto;
}
dialog button {
	color: var(--contentFG);
	border: none;
	font-size: 2em;
	background: none;
	font-weight: bold;
}
dialog button span{
	display: none;
}
dialog button.close::before{
	content: "✕";
}
dialog button.prev::before{
	content: "⬅";
}
dialog button.next::before{
	content: "➡";
}
dialog div.desc{
	display: flex;
	justify-content: space-between;
	margin: 0 5em;
	align-items: flex-end;
	text-align: center;
}
dialog div.desc button{
	margin-bottom: 0.2em;
}
/**********************************
 Footer
**********************************/
footer{
	font-size:0.8em;
	text-align: center;
}