@font-face {
	font-family: 'roboto';
	src: url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot');
	src: url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
		 url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
		 url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.svg#roboto') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'roboto';
	src: url('fonts/roboto_medium_macroman/Roboto-Medium-webfont.eot');
	src: url('fonts/roboto_medium_macroman/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/roboto_medium_macroman/Roboto-Medium-webfont.woff') format('woff'),
		 url('fonts/roboto_medium_macroman/Roboto-Medium-webfont.ttf') format('truetype'),
		 url('fonts/roboto_medium_macroman/Roboto-Medium-webfont.svg#robotomedium') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'roboto';
	src: url('fonts/roboto_italic_macroman/Roboto-Italic-webfont.eot');
	src: url('fonts/roboto_italic_macroman/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/roboto_italic_macroman/Roboto-Italic-webfont.woff') format('woff'),
		 url('fonts/roboto_italic_macroman/Roboto-Italic-webfont.ttf') format('truetype'),
		 url('fonts/roboto_italic_macroman/Roboto-Italic-webfont.svg#robotomedium') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'roboto';
	src: url('fonts/roboto_mediumitalic_macroman/Roboto-MediumItalic-webfont.eot');
	src: url('fonts/roboto_mediumitalic_macroman/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/roboto_mediumitalic_macroman/Roboto-MediumItalic-webfont.woff') format('woff'),
		 url('fonts/roboto_mediumitalic_macroman/Roboto-MediumItalic-webfont.ttf') format('truetype'),
		 url('fonts/roboto_mediumitalic_macroman/Roboto-MediumItalic-webfont.svg#robotomedium') format('svg');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'robotolight';
	src: url('fonts/roboto_light_macroman/Roboto-Light-webfont.eot');
	src: url('fonts/roboto_light_macroman/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/roboto_light_macroman/Roboto-Light-webfont.woff') format('woff'),
		 url('fonts/roboto_light_macroman/Roboto-Light-webfont.ttf') format('truetype'),
		 url('fonts/roboto_light_macroman/Roboto-Light-webfont.svg#robotolight') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'robotobold';
	src: url('fonts/roboto_bold_macroman/Roboto-Bold-webfont.eot');
	src: url('fonts/roboto_bold_macroman/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/roboto_bold_macroman/Roboto-Bold-webfont.woff') format('woff'),
		 url('fonts/roboto_bold_macroman/Roboto-Bold-webfont.ttf') format('truetype'),
		 url('fonts/roboto_bold_macroman/Roboto-Bold-webfont.svg#robotobold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon/icomoon.eot?e8owx3');
	src: url('fonts/icomoon/icomoon.eot?e8owx3#iefix') format('embedded-opentype'),
		 url('fonts/icomoon/icomoon.ttf?e8owx3') format('truetype'),
		 url('fonts/icomoon/icomoon.woff?e8owx3') format('woff'),
		 url('fonts/icomoon/icomoon.svg?e8owx3#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
	margin: 0px;
	padding: 0px;
	outline: none !important; /* supprime les cadres bleus lors des focus sous Chrome/Chromium */
}

body {
	font-family: 'roboto', sans-serif;
	font-size: 16px;
	color: #000000;
	line-height: normal;
	text-align: center;
	background-color: #fafafa;
	transition-property: color, background-color;
	transition-duration: 0.3s;
	overflow-x: hidden;
}

.wrapper {
	font-size: 13px;
	color: #000000;
	line-height: normal;
	width: 980px;
	text-align: center;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #a40000;
}

/* --------------------- Titres --------------------- */

h1,
h2,
h3,
h4,
h5 {
	margin: 15px 0;
}

h1 {
	font-weight: bold;
	font-size: 140%;
	color: #e6001f;
}

h2 {
	font-weight: bold;
	font-size: 110%;
	color: #333333;
}

h3 {
	font-weight: bold;
	font-size: 110%;
	color: #005aad;
}

h4 {
	font-weight: bold;
	font-size: 90%;
	color: #333333;
}

h5 {
	font-weight: bold;
	font-size: 70%;
	color: #333333;
}

/* --------------------- Listes --------------------- */

ul {
	padding-left: 15px;
	list-style-type: disc;
}

ul ul {
	padding-left: 20px;
	list-style-type: circle;
}

ul ul ul {
	padding-left: 30px;
	list-style-type: square;
}

/* --------------------- Liens --------------------- */

a {
	color: #e6001f;
	text-decoration: none;
	word-wrap: break-word;
}

a:hover,
a:focus {
	color: #e6001f;
	text-decoration: underline;
}

.linkname {
	display: inline-block;
	max-width: 264px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: text-bottom;
}

/* --------------------- Restes --------------------- */

table {
	border-collapse: collapse;
}

hr {
	margin: 15px 0;
	height: 1px;
	border: 0px;
	background-color: #c3c3c3;
	clear: both;
}

img {
	border: none;
	max-width: 100%;
}

img.emoji {
	display: inline;
	margin: 0 .1em;
	width: 1.3em;
	height: 1.3em;
	vertical-align: -0.3em;
}

#menu .nav img.emoji {
	min-width: unset;
	min-height: unset;
}

h1 img.emoji,
h2 img.emoji {
	width: 1em;
	height: 1em;
	vertical-align: -0.17em;
}

#mode-clair-sombre .auto::after,
#mode-clair-sombre-mobile .auto::after {
	content: 'A';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	font-family: 'roboto', sans-serif;
	font-size: 18px;
	transform: translate(-50%,-50%);
}

p {
	margin: 14px 0;
	text-align: left;
}

p:first-child {
	margin-top: 0;
}

p:last-child {
	margin-bottom: 0;
}

center {
	margin: 10px 0;
}

.left {
	float: left;
}

.right {
	float: right;
}

.agauche {
	text-align: left;
}

.adroite {
	text-align: right;
}

.centre {
	text-align: center;
}

.t18 {
	font-size: 18px;
}

.padding10 {
	padding: 10px;
}

.en-evidence {
	color: #005AAD;
	font-weight: bold;
}

.desc {
	font-size: 11px;
}

.fond_couleur {
	background-color: #EBEBEB;
}

.fond_couleur2 {
	background-color: #c0c0c0;
}

/*.fond_couleur .en-evidence {*/
/*	color: #b1d9ff;*/
/*}*/

/*.fond_couleur a {*/
/*	color: #CCCCCC;*/
/*}*/

/*.fond_couleur a:hover {*/
/*	color: #b1d9ff;*/
/*	text-decoration: underline;*/
/*}*/

.pointeur {
	cursor: pointer;
}

.selectionne {
	color: #FFFFFF;
	background-color: #4F4FFF;
}

.annotation {
	border: 0 dashed #4F4FFF;
	border-bottom-width: 1px;
}

.tag {
	display: inline-block;
	padding: 2px 7px;
	min-width: 66px;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	transition-property: color, background-color;
	transition-duration: 0.3s;
}

a.tag:hover,
a.tag:focus {
	text-decoration: none;
	background-color: #fff !important;
}

.ratio-16-9 {
	padding-bottom: 56.25%;
}

.ratio-une {
	padding-bottom: 58%;
}

/* --------------------- Formulaires --------------------- */

label {
	display: block;
	position: relative;
	padding-left: 26px;
	margin: 12px;
	font-size: 18px;
	text-align: left;
	font-weight: normal;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
label input {
	position: absolute;
	opacity: 0;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 3px;
	left: 0;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	border: 3px solid #000;
	background-color: #fff;
}

/* On mouse-over, add a grey background color */
label:hover input ~ .checkmark,
label:focus-within input ~ .checkmark {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
label input:checked ~ .checkmark {
	background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: '';
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
label input:checked ~ .checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
label .checkmark:after {
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e6001f;
}

/* Create a custom checkbox */
.checkbox {
	position: absolute;
	top: -9px;
	left: -5px;
	height: 25px;
	width: 25px;
	border-radius: 3px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
label:hover input ~ .checkbox,
label:focus-within input ~ .checkbox {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkbox {
	background-color: #e6001f;
}

label input:disabled ~ .txt {
	cursor: not-allowed;
	color: #babdb6;
}

label:hover input:disabled ~ .checkbox,
label:focus-within input:disabled ~ .checkbox {
	cursor: not-allowed;
	background-color: #eee;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox:after {
	content: '';
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
label input:checked ~ .checkbox:after {
	display: block;
}

/* Style the checkmark/indicator */
label .checkbox:after {
	left: 9px;
	top: 5px;
	width: 7px;
	height: 13px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.bouton {
	display: inline-block;
	font-family: 'robotobold';
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px 20px;
	min-width: 150px;
	border-radius: 100px;
	border: 2px solid;
	border-color: #000;
	color: #fff;
	font-size: 18px;
	background-color: #353c3e;
	transition-property: color, background-color, border-color;
	transition-duration: 0.3s;
}

.bouton:hover,
.bouton:focus {
	color: #e6001f;
	text-decoration: none;
	border-color: #e6001f;
	background-color: #fff;
}

.materialbouton {
	display: inline-block;
	font-size: 18px;
	border: none;
	background: none;
	transition-property: color, background-color;
	transition-duration: 0.3s;
}

.materialbouton:hover,
.materialbouton:focus {
	display: inline-block;
	color: #fff;
}

.note {
	width: 50px;
	height: 50px;
	color: #fff;
	font-size: 28px;
	font-weight: normal;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
}

.note span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sharebar {
	padding: 0;
	text-align: left;
}

.sharebar.sharevideo {
	margin-top: 15px;
}

.sharebar a {
	display: block;
	float: left;
	margin: 0px 10px 15px 0;
	padding: 5px;
	width: 55px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 24px;
	border: 1px solid #000;
	border-radius: 5px;
	transition-property: all;
	transition-duration: 0.3s;
}

.sharebar a.mastodon {
	border-color: #2b90d9;
	background-color: #2b90d9;
}

.sharebar a.mastodon:hover {
	color: #2b90d9;
}

.sharebar a.diaspora {
	border-color: #000;
	background-color: #000;
}

.sharebar a.diaspora:hover {
	color: #000;
}

.sharebar a.bluesky {
	height: 36px;
}

.sharebar a.bluesky path {
	fill: #1185FE;
	transition: all .3s;
}

.sharebar a.bluesky:hover path {
	fill: #000;
}

.sharebar a.twitter {
	height: 36px;
	border-color: #000;
	background-color: #000;
}

.sharebar a.twitter svg {
	margin-top: 1px;
	height: 22px;
	vertical-align: top;
}

.sharebar a.twitter path {
	fill: #fff;
	transition: all .3s;
}

.sharebar a.twitter:hover path {
	fill: #000;
}

.sharebar a.facebook {
	border-color: #3b5998;
	background-color: #3b5998;
}

.sharebar a.facebook:hover {
	color: #3b5998;
}

.sharebar a.google-plus {
	border-color: #dd4b39;
	background-color: #dd4b39;
}

.sharebar a.google-plus:hover {
	color: #dd4b39;
}

.sharebar a:hover {
	background-color: #fff;
}

.form-control {
	min-width: 100%;
	max-width: 100%;
	min-height: 34px;
	max-height: 500px;
}

.form-nls .form-control {
	padding: 6px 10px;
	border-color: #e0e0e0;
	transition: background-color ease-in-out .3s, border-color ease-in-out .3s, box-shadow ease-in-out .3s;
}

.form-nls .form-control:focus:invalid {
	background-color: #ffcdcd;
}

.form-nls .form-control:focus {
	border-color: #e6001f;
	box-shadow: inset 0 0 5px #00000077;
}

.form-nls .form-control::placeholder {
	color: #999;
}

.form-nls .input-group-addon {
	border-color: #e0e0e0;
	background-color: #e0e0e0;
}

.form-nls .input-group-addon img.emoji {
	min-width: 1.3em;
	min-height: 1.3em;
}

.form-nls .btn {
	color: #333;
	background-color: #e0e0e0;
	transition-property: all;
	transition-duration: 0.3s;
}

.form-nls .btn:hover {
	color: #fff;
	background-color: #e6001f;
}

.form-nls.page404 {
	margin-bottom: 15px;
}

.form-nls fieldset {
	margin-bottom: 20px;
	padding: 0 10px;
	border-radius: 5px;
	border: 1px solid #c0c0c0;
	background-color: #e0e0e0;
}

.form-nls fieldset legend {
	margin: 0;
	margin-left: 10px;
	padding: 1px 9px;
	width: auto;
	color: #353c3e;
	border: none;
	border-radius: 10px;
	background-color: #c0c0c0;
}

.formlabel,
label.formlabel {
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	line-height: 34px;
}

.formvalue {
	margin-bottom: 10px;
	padding: 0;
	text-align: left;
	line-height: 34px;
	min-height: 34px;
}

.formvalue * {
	line-height: normal;
}

.columns label {
	display: inline-block;
	margin: 0;
	width: 100%;
}

.btn-file {
	position: relative;
	overflow: hidden;
	margin: 0;
}

.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;
	display: block;
}

.file-check {
	position: absolute;
	right: 9px;
	top: 9px;
}

#moreinfo {
	display: none;
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 15px;
	padding-right: 15px;
}

#menu .form-nls .form-control {
	color: #fff;
	background-color: #4e5659;
}

#menu .form-nls .form-control:focus {
	color: #000;
	background-color: #fff;
}

#menu .form-nls .form-control:focus:invalid {
	background-color: #ffcdcd;
}

#menu .form-nls .form-control::placeholder {
	color: #e0e0e0;
}

#menu .form-nls .form-control:focus::placeholder {
	color: #999;
}

.ui-menu {
	z-index: 1001;
}

.ui-menu .ui-menu-item-wrapper {
	text-align: left;
}

.ui-menu .ui-menu-item {
	border-bottom: 1px solid #eee;
}

.ui-menu .ui-menu-item:last-child {
	border-bottom: none;
}

.gras {
	color: #e6001f !important;
	font-weight: bold !important;
}

.ax-main-container,
.ax-file-list {
	width: auto !important;
}

/* --------------------- Ossature du site --------------------- */

.navbar-default {
	margin-bottom: 0;
	background-color: #353c3e;
	border: none;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.navbar-brand {
	position: relative;
	padding: 10px;
	margin-right: 10px;
	margin-left: -5px !important;
	height: 66px;
}

.navbar-brand img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
	max-width: 100%;
	max-height: 46px;
	color: #fff;
}

.navbar-default .navbar-nav > li > a {
	line-height: 36px;
	color: white;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: white;
	background-color: #e6001f;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
	color: white;
	background-color: #e6001f;
}

.menu {
	font-family: 'robotobold';
	font-size: 16px;
}

.menu-login {
	margin: auto;
	padding: 10px;
}

.menu-login li {
	padding: 0;
}

.mon-compte {
	margin: 0 auto;
	padding: 0 !important;
	width: 46px;
	height: 46px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: #353c3e;
	transition-property: background-color, border-color !important;
	transition-duration: 0.3s !important;
	overflow: hidden;
}

.mon-compte:hover,
.mon-compte:focus {
	border-color: #e6001f;
	background-color: #fff !important;
}

img.mon-avatar {
	max-width: 100%;
	max-height: 100%;
}

.bouton-login, .bouton-login2 {
	font-family: 'robotobold';
	padding: 10px !important;
	margin: 0 auto !important;
	line-height: 22px !important;
	border-radius: 100px;
	border: 2px solid;
	border-color: #fff;
	color: #fff;
	font-size: 16px;
	background-color: #353c3e;
	transition-property: color, background-color, border-color !important;
	transition-duration: 0.3s !important;
}

.bouton-login {
	width: 46px;
	height: 46px;
	font-size: 20px;
}

.bouton-login2 {
	margin: 0 10px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bouton-login:hover, .bouton-login:focus,
.bouton-login2:hover, .bouton-login2:focus {
	color: #e6001f !important;
	border-color: #e6001f;
	background-color: #fff !important;
	cursor: pointer;
	text-decoration: none;
}

.nbnewmess,
.nbbr {
	position: absolute;
	top: 0;
	right: -5px;
	min-width: 20px;
	height: 20px;
	margin: auto;
	padding: 0 4px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	line-height: 20px;
	border-radius: 50px;
	background-color: #f00;
}

.nbbr {
	right: 0;
	background-color: #090;
}

#boutonprofilmobile {
	padding: 0 10px;
	height: 34px;
	color: #fff;
	font-size: 25px;
	line-height: 25px;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
}

.lien-menu {
	list-style: none;
	font-weight: bold;
	text-shadow: 0px 0px 4px white;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: inherit;
}

.logo-mobile {
	margin-left: 0 !important;
	height: auto;
}

.logo-mobile img {
	max-height: 30px;
}

.login-button {
	display: inline;
	color: white;
	background-color: #353c3e;
	line-height: 30px;
	height: 35px;
	border-radius: 2px;
	border: 2px solid;
	border-color: black;
	cursor: pointer;
	font-weight: bold;
	margin-top: 20px;
	width: 40%;
	padding-left: 5px;
	padding-right: 5px;
	transition-property: color, background-color, border-color;
	transition-duration: 0.6s;
}

.login-button:hover {
	color: black;
	background-color: #F0F0F0;
	border: 2px solid;
	border-color: #E0E0E0;
	cursor: pointer;
	text-decoration: none;
}

.avatar-button {
	margin: 5px;
	margin-left: 25px;
	padding: 0;
	width: 66px;
	height: 66px;
	border: 2px solid black;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	background-color: #353c3e;
	transition-property: background-color, border-color;
	transition-duration: 0.6s;
	overflow: hidden;
}

.avatar-button:hover {
	border-color: #E0E0E0;
	background-color: #F0F0F0;
}

img.avatar-header {
	max-width: 100%;
	max-height: 100%;
}


.sub-header {
	background-color: #c0c0c0;
	height: 30px;
	font-size: 0;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.social a {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #353c3e;
	font-size: 24px;
	text-decoration: none;
	vertical-align: middle;
	transition-property: color, background-color;
	transition-duration: 0.3s;
}

.social a:hover,
.social a:focus {
	background-color: #fff;
}

.social .feed {
	font-size: 28px;
	cursor: pointer;
}

.social .feed:hover,
.social .feed:focus {
	color: #fc902d;
}

#feedlist {
	display: none;
	position: absolute;
	margin-left: calc(17% + 6px);
	margin-top: 10px;
	padding: 0 10px;
	width: auto;
	line-height: 26px;
	font-size: 14px;
	text-align: left;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0px 0px 5px 2px #000a;
	z-index: 1;
}

#feedlist::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 0;
	right: 0;
	width: 10px;
	height: 10px;
	margin: 0 10px;
	transform: rotate(-45deg);
	background-color: #fff;
	box-shadow: 3px -3px 4px -1px #000a;
}

.social .mastodon:hover,
.social .mastodon:focus {
	color: #2b90d9;
}

.social .diaspora:hover,
.social .diaspora:focus {
	color: #000;
}

.social .bluesky:hover,
.social .bluesky:focus {
	color: #1185FE;
}

.social .bluesky > svg {
	height: 30px;
}

.social .bluesky path {
	fill: #353c3e;
	transition: all .3s;
}

.social .bluesky:hover path,
.social .bluesky:focus path {
	fill: #1185FE;
}

.social .twitter:hover,
.social .twitter:focus {
	color: #00acee;
}

.social .twitter > svg {
	height: 21px;
}

.social .twitter path {
	fill: #353c3e;
	transition: all .3s;
}

.social .twitter:hover path,
.social .twitter:focus path {
	fill: #000;
}

.social .mattermost {
	display: inline-block;
	font-family: 'icomoon';
	font-style: normal;
	font-weight: normal;
	font-size: 22px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.social .mattermost::before {
	content: "\e900";
}

.social .mattermost:hover,
.social .mattermost:focus {
	color: #0072c6;
}

.social .matrix svg {
	margin-top: 2px;
	height: 25px;
}

.social .matrix svg g {
	fill: #353c3e;
	transition: all .3s;
}

.social .matrix:hover svg g,
.social .matrix:focus svg g {
	fill: #000;
}

.social .discord:hover,
.social .discord:focus {
	color: #7289da;
}

.social .facebook:hover,
.social .facebook:focus {
	color: #3b5998;
}

.social .google-plus {
	font-size: 18px;
}

.social .google-plus:hover,
.social .google-plus:focus {
	color: #dd4b39;
}

.social .twitch {
	font-size: 21px;
}

.social .twitch:hover,
.social .twitch:focus {
	color: #653baa;
}

.social .peertube > svg {
	height: 21px;
}

.social .peertube path {
	fill: #353c3e;
	transition: all .3s;
}

.social .peertube:hover path:nth-child(1),
.social .peertube:focus path:nth-child(1) {
	fill: #211f20;
}

.social .peertube:hover path:nth-child(2),
.social .peertube:focus path:nth-child(2) {
	fill: #737373;
}

.social .peertube:hover path:nth-child(3),
.social .peertube:focus path:nth-child(3) {
	fill: #f1680d;
}

.social .youtube:hover,
.social .youtube:focus {
	color: #e3210c;
}

.toolbox,
.searchbox {
	padding: 0;
	height: 30px;
}

.searchbox {
	padding-right: 1px;
}

.input-search {
	font-family: 'robotolight';
	margin: 0;
	padding: 0 7px;
	width: 140px;
	height: 30px;
	line-height: 30px;
	font-size: 20px;
	border: none;
	background-color: #f0f0f0;
	vertical-align: middle;
	transition-property: width, color, background-color;
	transition-duration: 0.3s;
}

.input-search:focus {
	width: 350px;
	border: none;
}

.input-search:hover {
	border: none;
}

.submit-search {
	margin: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #353c3e;
	font-size: 24px;
	border: none;
	background-color: #f0f0f0;
	vertical-align: middle;
	transition-property: background-color, color;
	transition-duration: 0.3s;
}

.submit-search:hover,
.submit-search:focus {
	color: #e6001f;
}

.input-search:focus,
.input-search:focus ~ .submit-search {
	background-color: #e0e0ff;
}

.input-search:invalid {
	box-shadow: none;
}

.input-search:focus:invalid,
.input-search:focus:invalid ~ .submit-search {
	background-color: #ffcdcd;
}

#header a.lien-bloc {
	display: block;
	width: 980px;
	height: 150px;
}

#login-bloc-fond {
	background-color: #FFFFFF;
	background-image: url("images/bloc_fond.jpg");
	background-position: right top;
	background-repeat: repeat-y;
}

#login-bloc-ext {
	margin-bottom: 10px;
	width: 100%;
}

#login-bloc-int {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 11px;
	text-align: center;
}

#rechercher-bloc-fond {
	background-color: #FFFFFF;
	background-image: url("images/bloc_fond.jpg");
	background-position: right top;
	background-repeat: repeat-y;
}

#rechercher-bloc-ext {
	width: 100%;
}

#rechercher-bloc-int {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

input.login {
	width: 100%;
	text-align: center;
}

.avatar-header {
	max-height: 100px;
	max-width: 100px;
}

#corps0 {
	float: left;
	border: 2px solid #AAAAAA;
	border-top: 0px;
	border-bottom: 0px;
	background-color: #FFFFFF;
}

#corps {
	position: relative;
	float: left;
	width: 100%;
	min-height: calc(100vh - 212px);
	margin: 0px;
	padding: 0px;
	color: #000000;
	border: 1px solid #c0c0c0;
	border-top: 0px;
	border-bottom: 0px;
	background-color: #FFFFFF;
	transition-property: background-color, border-color;
	transition-duration: 0.3s;
}

#pub {
	float: right;
	width: 160px;
	margin-left: 10px;
	margin-bottom: 10px;
}

#footer {
	clear: both;
	padding: 20px 0;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	background-color: #353c3e;
	transition-property: background-color;
	transition-duration: 0.3s;
}

#footer div div {
	padding: 0;
}

#footer .container {
	position: relative;
}

#partenaires,
#liens-utiles {
	text-align: left;
}

#partenaires a,
#partenaires h3,
#liens-utiles a {
	color: #fff;
}

#partenaires h3 {
	margin-top: 0;
	font-size: 140%;
}

#liens-utiles {
	margin-bottom: 40px;
}

#licence {
	position: relative;
	text-align: right;
}

#getfirefox {
	font-family: 'robotolight';
	font-weight: normal;
	position: absolute;
	bottom: 0;
	right: 0;
	padding-right: 15px;
	color: #fff;
	font-size: 22px;
	transition-property: color;
	transition-duration: 0.3s;
}

#getfirefox:hover,
#getfirefox:focus {
	color: #f57900;
}

#getfirefox .fa-firefox {
	margin-right: 8px;
	font-size: 40px;
	vertical-align: middle;
}

#version {
	position: absolute;
	bottom: 0;
	left: 50%;
	max-width: 33%;
	color: #c8c8c8;
	font-size: 10px;
	line-height: 12px;
	transform: translateX(-50%);
}

.liens-reseaux-sociaux {
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	width: 160px;
	height: 40px;
}

.liens-reseaux-sociaux a {
	display: block;
	float: left;
}

h1.design,
h2.design,
h3.design {
	padding: 0;
	color: #e6001f;
	text-align: left;
	font-weight: normal;
	line-height: 44px;
	border-bottom: 2px solid #e6001f;
}

h1.design {
	font-size: 30px;
	margin: 0 0 15px;
}

h2.design {
	font-size: 24px;
	margin: 0 0 12px;
}

h3.design {
	font-size: 20px;
	margin: 0 0 10px;
}

h1.design a,
h2.design a,
h3.design a {
	transition-property: color;
	transition-duration: 0.3s;
}

h1.design a:hover,
h2.design a:hover,
h3.design a:hover,
h1.design a:focus,
h2.design a:focus,
h3.design a:focus {
	color: #000;
	text-decoration: none;
}

.article h1.design,
.article h2.design,
.article h3.design {
	line-height: 40px;
}

.filtres {
	float: right;
	color: #424242;
	font-size: 18px;
}

.filtres .buttonbloc {
	display: inline-block;
	position: relative;
	margin-left: 15px;
}

.filtres .buttonbloc .option {
	display: inline-block;
	border: none;
	background: none;
}

.filtres .buttonbloc .liste {
	display: none;
	position: absolute;
	top: 44px;
	left: 50%;
	padding: 6px 0;
	min-width: 150px;
	max-width: 200px;
	font-size: 14px;
	word-wrap: break-word;
	border: 1px solid #424242;
	border-radius: 3px;
	background-color: #fff;
	box-shadow: 2px 2px 4px 0 #00000077;
	transform: translateX(-50%);
	z-index: 99;
}

.article .filtres .buttonbloc .liste {
	top: 40px;
}

.filtres .buttonbloc .liste::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
	right: 0;
	width: 10px;
	height: 10px;
	margin: 0 auto;
	transform: rotate(-45deg);
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #424242;
	background-color: #fff;
}

.filtres .buttonbloc .liste a {
	display: block;
	padding: 0 5px;
	color: #000;
	line-height: 25px;
	border-left: 4px solid transparent;
}

.filtres .buttonbloc .liste a:hover,
.filtres .buttonbloc .liste a:focus {
	background-color: #e0e0e0;
}

.filtres .buttonbloc:hover .liste {
	display: block;
}

.filtres.filtretitle {
	display: inline-block;
	float: none;
	color: inherit;
	font-size: inherit;
}

.filtres.filtretitle .buttonbloc {
	margin: 0;
}

.menuv {
	margin-left: -15px;
	padding: 0;
}

.menuv li {
	list-style: none;
	text-align: left;
}

.menuv li a {
	position: relative;
	display: block;
	padding: 8px 15px 8px 5px;
	color: #353c3e;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0 30px 30px 0;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.menuv li a.actif {
	color: #e6001f;
	background-color: #c0c0c0;
}

.menuv li a:hover,
.menuv li a:focus {
	background-color: #f0f0f0;
}

.menuv li a span.fa {
	margin-right: 2px;
	vertical-align: middle;
}

.menuv li a span.nbnew {
	position: absolute;
	right: 18px;
	top: calc(50% - 12px);
}

.menuaside {
	margin-right: -15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.menuaside h3 {
	margin-left: 20px;
}

.menuaside li a {
	padding: 8px 10px;
	color: #222;
	border-radius: 0;
}

.menuaside ul {
	padding: 0;
}

.menuaside ul a {
	padding-left: 50px;
	color: #444;
}

.btnmaside {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	line-height: 43px;
	background-color: #353c3e;
	color: #fff;
	border-radius: 0 0 0 50px;
	padding-left: 7px;
	cursor: pointer;
}

/* -------------------- Erreur 404 -------------------- */

.bannererror {
	padding: 20px;
	background-color: #353c3e;
}

.bannererror img {
	max-width: 100%;
	max-height: 400px;
}

.messageerror {
	margin: 10px;
	color: #e6001f;
	font-size: 28px;
	font-weight: normal;
}

/* --------------------- A la Une --------------------- */

.une {
	position: relative;
	display: block;
	padding: 0;
	height: 225px;
	overflow: hidden;
}

.une.first {
	height: 450px;
}

.une .lien {
	display: block;
	height: 100%;
	width: 100%;
	background-color: #353c3e;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition-property: all;
	transition-duration: 0.3s;
}

.une .titre {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	padding: 10px 12px;
	background-color: #000000bf;
	transition-property: all;
	transition-duration: 0.3s;
}

.une.first .titre h2 {
	color: #fff;
	font-size: 27px;
	font-weight: normal;
	text-align: left;
	line-height: 90%;
}

.une .titre h2 {
	position: absolute;
	top: 50%;
	left: 12px;
	margin: 0;
	width: calc(100% - 135px);
	max-height: 64px;
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	text-align: left;
	line-height: 110%;
	transform: translate(0, -50%);
	transition-property: all;
	transition-duration: 0.3s;
}

.une .tag {
	position: absolute;
	right: 16px;
	bottom: 17px;
	padding: 2px 14px;
	font-size: 24px;
}

.une:hover .lien {
	transform: scale(1.15);
}

.une:hover .titre {
    background-color: #ffffffbf;
}

.une:hover .titre h2 {
	color: #e6001f;
}

/* --------------------- Accueil - News --------------------- */

.news {
	display: inline-block;
	margin-top: 30px;
	padding: 0 0px 0px 30px;
}

.news .blocimg {
	position: relative;
	overflow: hidden;
}

.news .img,
.video .img {
	display: block;
	width: 100%;
	background-color: #c8c8c8;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition-property: all;
	transition-duration: 0.3s;
}

.news .tag {
	position: absolute;
	left: 4px;
	bottom: 4px;
}

h3.design a {
	margin-right: 65px;
}

.news .com,
.video .vues,
.video .com,
.blocarticle .com,
h3.design .com {
	padding: 2px 7px;
	color: #fff;
	border-radius: 3px;
	background-color: #000000a0;
	transition-property: color, background-color;
	transition-duration: 0.3s;
}

.news .com,
.video .com,
h3.design .com {
	position: absolute;
	right: 4px;
	bottom: 4px;
}

h3.design .com {
	margin-right: inherit;
	bottom: inherit;
	font-size: 16px;
	line-height: normal;
}

.news .com:hover,
.news .com:focus,
.video .com:hover,
.video .com:focus,
.blocarticle .com:hover,
.blocarticle .com:focus,
h3.design .com:hover,
h3.design .com:focus {
	color: #e6001f;
	text-decoration: none;
	background-color: #fff !important;
}

h3.designcom {
	position: relative;
	clear: both;
	line-height: normal !important;
}

.news h3,
.video h3 {
	margin: 7px 5px 4px;
	font-size: 18px;
	text-align: left;
}

.news h3 a,
.video h3 a {
	color: #000;
}

.news h3 a:hover,
.news h3 a:focus,
.video h3 a:hover,
.video h3 a:focus {
	color: #e6001f;
}

.news .date,
.video .date {
	margin: 0 5px;
	color: #808080;
	font-size: 14px;
	text-align: left;
	font-weight: bold;
}

.news .blocimg:hover .img {
	transform: scale(1.15);
}

.riiconnect24 {
	display: none;
	margin: 30px -15px 0 15px;
	border: 1px solid #c0c0c0;
	border-right: none;
	transition-property: border-color;
	transition-duration: 0.3s;
}

.riiconnect24:hover,
.riiconnect24:focus {
	border-color: #e6001f;
}

/* ------------------- Sondages --------------------- */

.sondage {
	margin: 30px -15px 0 15px;
	padding: 20px 30px;
	background-color: #c8c8c8;
}

.sondage h5 {
	margin: 0 0 20px 0px;
	color: #000;
	font-size: 22px;
	font-weight: normal;
}

.sondage .resultats {
	text-align: left;
}

.sondage .sondage-barre {
	margin: 0;
	margin-bottom: 10px;
	min-width: 2px;
	background-color: #353c3e;
}

.sondage .sondage-barre div {
	padding: 0 10px;
	height: 20px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	text-shadow: 1px 1px 1px #000;
}

aside .sondage {
	margin: -12px -15px 0 -15px;
	background: none;
}

.sondage.pagesondage {
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.liste_sondages {
	margin: 15px 0;
	padding: 0;
	text-align: left;
}

.liste_sondages > div:nth-child(odd) {
	background-color: #eee;
}

/* -------------------- Video --------------------- */

.video {
	margin: 30px -15px 0 15px;
}

.video .img {
	position: relative;
	display: block;
	background-color: #c8c8c8;
	background-size: cover;
	background-position: center center;
}

.video .img .play,
.lvideo .img .play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #00000099;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.video .img .play span,
.lvideo .img .play span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 56px;
	color: #ffffffb2;
	transition-property: color;
	transition-duration: 0.3s;
}

.video .img .play:hover,
.video .img .play:focus,
.lvideo .img .play:hover,
.lvideo .img .play:focus {
	background-color: #fff;
}

.video .img .play:hover span,
.video .img .play:focus span,
.lvideo .img .play:hover span,
.lvideo .img .play:focus span {
	color: #e6001f;
}

#lecteur-direct {
	position: relative;
	font-size: 0;
	background-color: #353c3e;
	transition-property: background-color;
	transition-duration: 0.3s;
	z-index: 1;
}

#lecteur-direct iframe {
	max-width: 100%;
	max-height: 56.25vw;
}

.notifdirect {
	position: absolute;
	bottom: 4px;
	left: 50%;
	width: max-content;
	padding: 2px 5px 2px 2px;
	font-size: 9px;
	line-height: normal;
	border: 1px solid #fff;
	border-radius: 50px;
	background-color: #353c3e;
	transform: translateX(-50%);
}

#notifdirect-mobile {
	float: right;
	display: flex;
	align-items: center;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 15px;
	height: 34px;
	color: #fff;
	text-decoration: none;
	border: none;
	background: none;
}

#notifdirect-mobile .notifdirect {
	position: unset;
	vertical-align: middle;
	transform: none;
}

/* -------------------- Vidéos -------------------- */

.rowvideos {
	margin-bottom: 15px;
	padding-right: 15px;
	clear: both;
}

.rowvideos .video {
	margin: 0;
	padding: 0 0 0 15px;
}

.rowvideos .video .blocimg {
	position: relative;
}

.video .vues {
	position: absolute;
	left: 4px;
	bottom: 4px;
}

.video .note {
	position: absolute;
	top: 4px;
	right: 4px;
	background-color: #353c3e;
}

.infosvideo {
	position: relative;
	margin: auto;
	padding: 3px 7px;
	width: 802px;
	max-width: 100%;
	color: #fff;
	text-align: left;
	border-radius: 0 0 10px 10px;
	background-color: #353c3e;
}

.infosvideo a {
	padding: 0px 5px;
	color: #fff;
	border-radius: 30px;
	border: 2px solid transparent;
	background-color: transparent;
	transition: background-color .3s;
	cursor: pointer;
}

.infosvideo .peertube {
	padding: 0px 9px;
}

.infosvideo a.actif {
	border-color: #e6001f;
}

.infosvideo a:hover,
.infosvideo a:focus {
	text-decoration: none;
	background-color: #e6001f;
}

.infosvideo .peertube svg {
	height: 17px;
	vertical-align: -2px;
}

.infosvideo .peertube path {
	fill: #fff;
}

.notevideo {
	position: absolute;
	top: 0;
	right: 0;
	padding: 3px 7px;
	border-radius: 0 0 10px 0;
	background-color: #000;
}

.blocnotation {
	float: right;
	margin: 0 0 0 7px;
	padding: 0 5px;
	line-height: 40px;
	border-radius: 5px 5px 0 0;
	background-color: #d6d6d6;
}

.blocnotation a {
	display: inline !important;
	margin: 0 !important;
	color: #000 !important;
	font-size: 16px !important;
	border-radius: 5px !important;
}

.blocnotation a:hover {
	color: #e6001f !important;
}

.blocnotation select {
	padding: 2px 0;
	width: 30px;
	text-align: center;
	border: none;
	border-radius: 5px;
	background-color: #f3f3f3;
}

/* -------------------- Tests --------------------- */

.tests {
	float: left;
	margin-top: 30px;
	width: 100%;
	text-align: left;
	background-color: #c8c8c8;
}

.tests h4 {
	margin: 5px 0 15px;
	color: #e6001f;
	font-size: 24px;
	font-weight: normal;
	line-height: normal;
	border-bottom: 2px solid #e6001f;
}

.test {
	margin: 0 0 15px;
	padding: 0;
	height: 160px;
}

.test .lienimg {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 160px;
	height: 160px;
	overflow: hidden;
}

.test .lienimg .img {
	width: 100%;
	height: 100%;
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition-property: all;
	transition-duration: 0.3s;
}

.test .lienimg:hover .img {
	transform: scale(1.15);
}

.test .infos {
	position: relative;
	float: left;
	margin-left: 170px;
	height: 160px;
}

.test .infos h3 {
	margin: 3px 0;
	font-size: 18px;
}

.test .infos h3 a {
	color: #000;
}

.test .infos h3 a:hover,
.test .infos h3 a:focus {
	color: #e6001f;
}

.test .infos .note {
	position: absolute;
	padding-left: 0;
	left: 0;
	bottom: 0;
}

.noteForte {
	background-color: #008c00 !important;
}

.noteMoyenne {
	background-color: #a1a100 !important;
}

.noteFaible {
	background-color: #ad0000 !important;
}

/* --------------------- News --------------------- */

.index_news {
	margin: 0px;
	margin-left: 22px;
	padding: 2px;
}

.index_news img {
	vertical-align: middle;
	margin-bottom: 1px;
}

.index_news_bloc {
	margin-top: 5px;
	margin-bottom: 15px;
}

#news_titre {
	text-align: left;
	font-size: 16px;
	color: #333333;
	font-weight: bold;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 20px;
}

#news_titre img {
	float: right;
	text-align: right;
	padding-top: 3px;
}

#news_corps {
	text-align: justify;
}

#news_img {
	float: left;
	padding-right: 5px;
}

#news_img a img {
	border: 2px solid #444444;
}

#news_img a:hover img {
	border: 2px solid #005AAD;
}

#news_signature {
	text-align: right;
	font-style: italic;
	margin-top: 20px;
	margin-bottom: 10px;
}

/* --------------------- Commentaires --------------------- */

.combouton {
	display: block;
	clear: both;
	margin: auto;
	max-width: 350px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	border: 1px solid #e6001f;
	border-radius: 50px;
	background-color: #e6001f;
	transition-property: all;
	transition-duration: 0.3s;
}

.combouton:hover,
.combouton:focus {
	text-decoration: none;
	background-color: #fff;
}

.bloccom,
.blocposter {
	clear: both;
	margin: 15px 0px 15px -15px;
}

.bloccom .auteur,
.blocposter .auteur {
	float: left;
	margin-bottom: 15px;
	padding-top: 25px;
	width: 180px;
}

.bloccom .auteur .avatar,
.blocposter .auteur .avatar {
	display: block;
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 5px;
	background-color: #eee;
	background-position: center;
	background-size: cover;
}

.bloccom .com,
.blocposter .com {
	padding-left: 180px;
	width: 100%;
}

.bloccom .com p,
.blocposter .com p {
	text-align: justify;
	hyphens: auto;
	word-break: break-word;
}

.com .newcom {
	color: #e6001f;
	text-shadow: 1px 0 0 #ffffff, 0 1px 0 #ffffff, -1px 0 0 #ffffff, 0 -1px 0 #ffffff;
}

.bloccom .com .date {
	margin-left: 10px;
	height: 25px;
	line-height: 25px;
	color: #808080;
	text-align: left;
}

.bloccom .com .message,
.blocposter .com .postemessage {
	position: relative;
	padding: 7px 10px;
	border: 1px solid #d6d6d6;
	border-radius: 5px;
	background-color: #eee;
	transition-property: background-color, border-color, color;
	transition-duration: 0.3s;
}

.blocposter .com .postemessage {
	padding: 0;
	margin-bottom: 20px;
}

.bloccom .com .message::before {
	content: '';
	position: absolute;
	top: 13px;
	left: -6px;
	right: 0;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	border-width: 0 0 1px 1px;
	border-style: solid;
	border-color: #d6d6d6;
	background-color: #eee;
	transition-property: background-color, border-color;
	transition-duration: 0.3s;
}

.blocposter .com .postemessage::after,
.blocposter .com .postemessage::before {
	content: '';
	display: block;
	position: absolute;
	left: -16px;
	width: 0;
	height: 0;
	border-style: solid;
	transition-property: border-color;
	transition-duration: 0.3s;
}

.blocposter .com .postemessage::before {
	top: 9px;
	border-color: transparent #d6d6d6 transparent transparent;
	border-width: 8px;
}

.blocposter .com .postemessage::after {
	top: 10px;
	border-color: transparent #eee transparent transparent;
	border-width: 7px;
	left: -14px;
}

.blocposter .com .postemessage textarea {
	padding: 5px;
	width: 100%;
	height: 230px;
	max-width: 100%;
	min-width: 100%;
	min-height: 230px;
	border: none;
	background-color: transparent;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.blocposter .com .postemessage textarea:focus {
	background-color: #e0e0ff;
}

.bloccom .com .message blockquote,
.mp-message blockquote {
	margin: 10px 0;
	padding: 2px 5px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	background-color: #ccc;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.bloccom .com .message blockquote:first-child {
	margin-top: 3px;
}

.bloccom .com .message blockquote blockquote {
	background-color: #aaa;
}

.bloccom .com .message .com-edit {
	margin-top: 3px;
	color: #555;
	font-size: 12px;
	text-align: left;
}

.options {
	margin-right: 10px;
	text-align: left;
}

.options a {
	display: inline-block;
	margin-left: 10px;
	padding: 4px;
	width: 33px;
	color: #808080;
	font-size: 20px;
	text-align: center;
	border-radius: 0 0 5px 5px;
	background-color: #d6d6d6;
	cursor: pointer;
	text-decoration: none;
	transition-property: all;
	transition-duration: 0.3s;
}

.options a:hover {
	color: #e6001f;
	background-color: #e7e7e7;
}

.options .blocbbcode,
.options .blocboutonsmileys {
	display: inline-block;
	padding: 5px 0px 0 6px;
	font-size: 20px;
	border-radius: 5px 5px 0 0;
	background-color: #d6d6d6;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.options .blocbbcode span,
.boutonsmileys {
	margin: 0 5px 5px 0;
	padding: 5px 0;
	width: 30px;
	text-align: center;
	border-radius: 3px;
	background-color: #f3f3f3;
	cursor: pointer;
	transition-property: all;
	transition-duration: 0.3s;
}

.options .blocbbcode span:hover,
.options .blocbbcode span:focus {
	color: #e6001f;
	background-color: #fff;
}

.options .blocboutonsmileys {
	float: right;
}

.options.compact {
	margin-right: 0;
}

.options.compact .visible-xs {
	display: inline-block !important;
}

.options.compact .hidden-xs {
	display: none !important;
}

.options.compact .blocbbcode {
	display: block;
}

.options.compact ~ textarea.form-control {
	margin-top: -1px;
	border-radius: 0 0 5px 5px;
}

.bloccom .com .options {
	text-align: right;
}

.postercom h3 {
	clear: both;
	margin: 20px 0;
	line-height: normal;
}

.postercom .bouton {
	margin: 0 10px 20px;
}

.blocposter .com .options {
	margin: 0 10px;
}

.blocposter .auteur {
	padding-top: 40px;
}

.boutonsmileys {
	position: relative;
	padding: 0;
	height: 30px;
	vertical-align: top;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.boutonsmileys img {
	width: 20px;
}

.boutonsmileys .blocsmileys {
	display: none;
	position: absolute;
	right: -37px;
	top: 40px;
	padding: 5px;
	width: 102px;
	font-size: 0;
	text-align: center;
	border-radius: 5px;
	background-color: #808080;
	z-index: 20;
}

.boutonsmileys .blocsmileys::before {
	content: '';
	position: absolute;
	right: 42px;
	top: -10px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #808080;
}

.boutonsmileys .blocsmileys img {
	padding: 3px;
	width: 23px;
	height: 23px;
}

.boutonsmileys:hover .blocsmileys {
	display: block;
}

/* ----------------- Articles - Liste ----------------- */

.blocarticle {
	margin-bottom: 15px;
	text-align: justify;
	hyphens: auto;
	word-break: break-word;
	clear: both;
}

.blocarticle header {
	margin: 0 !important;
	height: auto !important;
	overflow: initial !important;
}

.blocarticle header .com {
	float: right;
	transition-property: all;
	transition-duration: 0.3s;
}

.blocarticle header .tags {
	margin-right: 60px;
	transition-property: all;
	transition-duration: 0.3s;
}

.blocarticle header a.tag:hover,
.blocarticle header a.tag:focus,
.blocarticle .com:hover,
.blocarticle .com:focus,
h3.design .com:hover,
h3.design .com:focus {
	box-shadow: 0 0 2px 0 #000000cc;
}

.blocarticle header h2 {
	margin: -5px 0 0;
	line-height: normal;
}

.blocarticle header h2 a {
	color: #000;
	font-size: 24px;
}

.blocarticle header .auteurdate {
	margin-bottom: 5px;
	color: #676767;
	font-weight: bold;
}

.blocarticle article {
	min-height: 168px;
}

.blocarticle article .lienimg {
	position: relative;
	display: block;
	float: left;
	height: 168px;
	width: 200px;
	overflow: hidden;
}

.blocarticle article .lienimg .img {
	height: 168px;
	width: 200px;
	background-color: #c8c8c8;
	background-position: center;
	background-size: cover;
	transition-property: all;
	transition-duration: 0.3s;
}

.blocarticle article .lienimg:hover .img {
	transform: scale(1.15);
}

.blocarticle article .lienimg .note {
	position: absolute;
	right: 10px;
	bottom: 10px;
	word-break: keep-all;
	z-index: 20;
}

.blocarticle article p {
	margin: 0;
	margin-left: 210px;
	font-size: 18px;
	text-align: justify;
	hyphens: auto;
	word-break: break-word;
}

.pagination {
	margin: 12px 0 24px;
}

.pagination ul {
	list-style: none;
	padding: 0;
}

.pagination ul li {
	float: left;
}

.pagination a {
	display: block;
	margin: 0 10px;
	padding: 0 5px;
	min-width: 30px;
	height: 30px;
	color: #000;
	line-height: 30px;
	border-radius: 30px;
	background-color: #cecece;
	transition-property: all;
	transition-duration: 0.3s;
}

.pagination a:hover,
.pagination a:focus,
.pagination .actif {
	color: #fff;
	text-decoration: none;
	background-color: #e6001f;
}

.pagination .fa {
	font-size: 25px;
	line-height: 29px;
}

/* --------------------- Articles --------------------- */

twitter-widget,
.twitter-tweet {
	margin: auto;
}

article iframe {
	display: block;
	margin: auto;
	max-width: 100%;
	max-height: 56.25vw;
}

article iframe.twitter-tweet,
.twitter-tweet iframe {
	max-height: 100%;
}

.article header {
	position: relative;
	margin: 0 -15px;
	overflow: hidden;
}

.article header .imgentete {
	width: 100%;
	background-color: #e0e0e0;
	background-position: center;
	background-size: cover;
}

.article header .imgentete::before {
	display: block;
	content: '';
	background-image: linear-gradient(transparent 25%, #fff);
	padding-bottom: 56.25%;
}

.article.profil header .imgentete::before {
	padding-bottom: 33.19%;
}

.article header .bloctitre {
	padding: 0 15px;
	margin-top: -82px;
	text-align: left;
}

.article header.alt .bloctitre {
	margin-top: -80px;
}

.bloctitre .blocpochette,
.bloctitre .avatar {
	display: inline-block;
	margin-right: 10px;
}

.bloctitre .blocpochette img,
.bloctitre .avatar {
	max-width: 200px;
	max-height: 150px;
}

.bloctitre .blocinfos {
	display: inline-block;
	margin-top: 25px;
	text-align: left;
	font-size: 14px;
	color: #676767;
	max-width: calc(100% - 160px);
	vertical-align: bottom;
}

.bloctitre .blocinfos .tag,
.blocarticle header .tag {
	margin: 0 10px 7px 0;
}

.bloctitre .blocinfos h1 {
	margin: 1px 0 5px;
	font-family: 'robotolight';
	font-weight: normal;
	font-size: 32px;
	color: #000;
}

.bloctitre .blocinfos .infos,
.bloctitre .blocinfos .dates {
	line-height: 26px;
}

.bloctitre .blocinfos .infos span {
	color: #000;
}

.bloctitre .blocinfos .dates img {
	margin-left: 10px;
	margin-bottom: 1px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.search .bloctitre .blocpochette,
.membres .bloctitre .blocpochette {
	display: block;
	float: left;
	margin-right: 0;
	width: 160px;
}

.search .bloctitre .blocpochette a,
.membres .bloctitre .blocpochette a {
	display: block;
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 5px;
	background-color: #e0e0e0;
	background-position: center;
	background-size: cover;
}

.search .bloctitre .blocinfos,
.membres .bloctitre .blocinfos {
	display: block;
	margin-left: 160px;
}

.membres .bloctitre .blocinfos {
	min-height: 100px;
}

.search .bloctitre .blocinfos h2,
.membres .bloctitre .blocinfos h2 {
	margin: 1px 0 2px;
	font-family: 'robotolight';
	font-weight: normal;
	font-size: 24px;
	color: #000;
}

.search .bloctitre .note {
	float: right;
}

.profil .bloctitre .blocinfos {
	margin-right: 70px;
}

.circlebutton {
	position: absolute;
	right: 15px;
	bottom: 3px;
	display: block;
	width: 50px;
	height: 50px;
	color: #fff;
	font-size: 28px !important;
	font-weight: normal;
	line-height: 50px !important;
	text-align: center;
	border-radius: 50%;
	background-color: #e6001f;
	transition-property: all;
	transition-duration: 0.3s;
}

.circlebutton:hover,
.circlebutton:focus {
	color: #e6001f;
	text-decoration: none;
	box-shadow: 0 0 2px 0 #000000cc;
	background-color: #fff;
}

.navjeux {
	margin: 15px -15px;
	padding: 0;
	height: 50px;
	list-style: none;
	color: #fff;
	font-size: 22px;
	font-family: 'robotolight';
	border-right: 1px solid #fff;
	background-color: #e0e0e0;
	overflow: hidden;
	z-index: 10;
}

.navjeux li {
	float: left;
	width: 20%;
	line-height: 50px;
	border-right: 1px solid #c8c8c8;
}

.navjeux li:last-child {
	border-right: none;
}

.navjeux li a {
	display: block;
	width: 100%;
	color: #000;
	line-height: 50px;
}

.navjeux li a:hover,
.navjeux li a:focus {
	color: #e6001f;
	text-decoration: none;
}

.navjeux li.actif {
	margin-top: 2px;
	font-family: 'roboto', sans-serif;
	color: #e6001f;
	line-height: 46px;
	border-bottom: 2px solid #e6001f;
}

.navjeux.x4 li {
	width: 25%;
}

.navjeux .nbitems {
	display: inline-block;
	font-family: 'roboto', sans-serif;
	min-width: 20px;
	height: 15px;
	margin: auto;
	padding: 0 5px;
	color: #fff;
	font-size: 11px;
	line-height: 14px;
	border-radius: 50px;
	background-color: #353c3e;
	transform: translate(4px, -8px);
}

.navjeux li a:hover .nbitems,
.navjeux li a:focus .nbitems,
.navjeux li.actif .nbitems {
	background-color: #e6001f;
}

.article .auteurdate {
	margin-top: 3px;
	margin-bottom: 10px;
	color: #676767;
	text-align: left;
}

.annexe {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	background-color: #e0e0e0;
	overflow: hidden;
	transition-property: background-color;
	transition-duration: 0.3s;
	z-index: 0;
}

.article-img1 {
	float: left;
	margin: 0px;
	margin-right: 5px;
	border: 1px;
	vertical-align: middle;
}

.article-img2 {
	float: right;
	margin: 0px;
	margin-left: 5px;
	margin-top: 2px;
	border: 2px;
	vertical-align: middle;
}

.article-img3 {
	float: left;
	margin: 0px;
	margin-right: 5px;
	margin-top: 2px;
	border: 2px;
	vertical-align: middle;
}

.article-paragraphe h2,
.article-paragraphe h3,
.article-intro-conclusion h2,
.article-intro-conclusion h3 {
	color: #e6001f;
	font-size: 140%;
}

.article-paragraphe h3,
.article-intro-conclusion h3 {
	margin-left: 25px;
	font-size: 120%;
}

.article-paragraphe h4 {
	margin-left: 50px;
	font-size: 110%;
}

.article-intro-conclusion p,
.article-paragraphe p {
	text-align: justify;
	hyphens: auto;
	word-break: break-word;
}

.article-intro-conclusion blockquote,
.article-paragraphe blockquote {
	margin: 14px 0;
	padding: 25px 30px;
	color: #222;
	font-size: 17.5px;
	border: none;
	background-color: #eee;
	background-image: url("images/blockquote1.png"), url("images/blockquote2.png");
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: 10px 10px, right 10px bottom 10px;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.article-intro-conclusion {
	margin: 0;
	margin-bottom: 15px;
	text-align: left;
	font-weight: bold;
}

.article-paragraphe {
	margin: 0;
	margin-bottom: 15px;
	text-align: left;
}

.lesplus,
.lesmoins {
	margin: 0 0 15px;
}

.lesplus h3,
.lesmoins h3 {
	margin: 0 0 10px;
}

.lesplus div,
.lesmoins div {
	margin-left: 20px;
	text-align: left;
}

.lesplus span,
.lesmoins span {
	font-family: 'robotobold';
	font-size: 18px;
}

.lesplus h3,
.lesplus span {
	color: #009700;
}

.lesmoins h3,
.lesmoins span {
	color: #970000;
}

.blocnotes {
	padding: 0;
	margin: 0 0 15px;
	text-align: left;
	background-color: #e0e0e0;
}

.blocnotes div {
	padding: 0 10px;
}

.blocnotes h4 {
	color: #000;
	font-size: 18px;
}

.blocnotes h4 .sousnote {
	float: right;
}

.blocnotes p {
	margin: 0 0 10px;
	text-align: justify;
	hyphens: auto;
	word-break: break-word;
}

.blocnotes .verdict {
	position: relative;
	padding: 1px 10px;
	color: #fff;
	background-color: #424543;
}

.blocnotes .verdict h4 {
	margin: 10px 0;
	color: #fff;
}

.blocnotes .verdict p {
	margin: 0 0 10px;
	width: calc(100% - 60px);
}

.blocnotes .verdict .note {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	color: #fff;
	font-size: 28px;
	font-weight: normal;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
}

.asidearticle {
	position: relative;
	margin: 0 0 10px;
	padding: 0;
	height: 100px;
	overflow: hidden;
}

.asidearticle .lienimg {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100px;
	height: 100px;
	overflow: hidden;
}

.asidearticle.lvideo .lienimg {
	width: 178px;
}

.asidearticle .lienimg .img {
	width: 100%;
	height: 100%;
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition-property: all;
	transition-duration: 0.3s;
}

.asidearticle .lienimg:hover .img {
	transform: scale(1.15);
}

.asidearticle.lvideo .lienimg:hover .img {
	transform: none;
}

.asidearticle .infos {
	float: left;
	margin-left: 110px;
	height: 100px;
	text-align: left;
}

.asidearticle.lvideo .infos {
	margin-left: 188px;
}

.asidearticle .infos h3 {
	margin: 3px 0;
	font-size: 18px;
	line-height: 23px;
}

.asidearticle .infos h3 a {
	color: #000;
}

.asidearticle .infos h3 a:hover,
.asidearticle .infos h3 a:focus,
.blocarticle header h2 a:hover,
.blocarticle header h2 a:focus {
	color: #e6001f;
}

.asidearticle .infos .date {
	margin: 0 7px;
	color: #777777;
	font-weight: bold;
}

.asidearticle .infos .note {
	position: absolute;
	right: 0;
	top: 0;
}

.galerie {
	margin-bottom: 10px;
}

.galerie-row {
	margin: 0 -10px;
}

.galerie-row a {
	display: inline-block;
	padding: 10px;
}

.galerie-row a img {
	max-height: 250px;
}

/* --------------------- MP --------------------- */

.mp-liste {
	overflow: auto;
	padding: 0 10px 10px;
	height: 200px;
	border: 1px solid #c0c0c0;
	border-top: none;
	border-radius: 0 0 25px 25px;
}

.mp-outils {
	padding: 5px;
	padding-left: 31px;
	color: #353c3e;
	text-align: left;
	border-radius: 25px 25px 0 0;
	background-color: #c0c0c0;
}

.mp-tab {
	width: 100%;
}

.mp-tab tr {
	height: 45px;
}

.mp-tab thead th:first-child {
	width: 45px;
	min-width: 45px;
}

.mp-tab thead th:nth-child(2) {
	min-width: 200px;
}

.mp-tab thead th:nth-child(3) {
	min-width: 200px;
}

.mp-tab thead th:last-child {
	min-width: 200px;
}

.mp-tab label input {
	margin: -6px -25px !important;
}

.mp-tab label {
	margin: 0;
	margin-left: 10px;
	margin-bottom: 8px;
}

.mp-tab label .checkbox {
	margin: 0;
}

.mp-message-entete {
	margin-top: 10px;
	padding: 5px 12px;
	text-align: left;
	background-color: #c0c0c0;
	border-radius: 25px 25px 0 0;
}

.mp-message {
	margin-bottom: 10px;
	padding: 5px 12px;
	text-align: left;
	border: 1px solid #c0c0c0;
	border-radius: 0 0 25px 25px;
}

input.mp-bouton-sup {
	padding-left: 20px;
	background-image: url("images/boutons/supprimer.png");
	background-repeat: no-repeat;
	background-position: 2px 50%;
}

input.mp-bouton-lu {
	padding-left: 24px;
	background-image: url("images/boutons/lu.png");
	background-repeat: no-repeat;
	background-position: 6px 50%;
}

input.mp-bouton-nonlu {
	padding-left: 24px;
	background-image: url("images/boutons/nonlu.png");
	background-repeat: no-repeat;
	background-position: 6px 50%;
}

/* --------------------- Videos --------------------- */

.vignette-video {
	float: left;
	margin: 10px;
	padding: 10px;
	width: 150px;
}

.vignette-video-miniature {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 150px;
	height: 84px;
}

.vignette-video-miniature img {
	margin-top: 27px;
}

.vignette-video-miniature a {
	position: absolute;
	width: 150px;
	height: 84px;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
}

/* -------------------- Recherche ------------------- */

.search header {
	margin: 0 0 20px;
}

.search .navjeux {
	margin-top: 0;
}

.search .navjeux li {
	width: 50%;
}

/* -------------------- Courriel- ------------------- */

.courriel .regles {
	margin-bottom: 20px;
	text-align: left;
}

.courriel .code {
	display: inline-block;
	width: 100px;
	min-width: 100px;
	max-width: 100px;
}

.courriel h2.design {
	clear: both;
	line-height: normal;
}

.courriel .codehtml {
	margin-top: 10px;
	margin-bottom: 15px;
	height: 75px;
}

/* --------------------- Équipe-- ------------------- */

.profile_equipe {
	font-size: 0;
	text-align: left;
	background-color: #c0c0c0;
}

.profile_equipe:nth-child(even) {
	margin: 20px 25% 20px -15px;
	border-radius: 0 20px 20px 0;
}

.profile_equipe:nth-child(odd) {
	margin: 20px -15px 20px 25%;
	border-radius: 20px 0 0 20px;
}

.profile_equipe .avatar {
	display: inline-block;
	margin: 10px;
	width: 100px;
	height: 100px;
	border-radius: 5px;
	background-color: #eee;
	background-position: center;
	background-size: cover;
	vertical-align: middle;
}

.profile_equipe .details {
	display: inline-block;
	margin: 10px 0;
	width: calc(100% - 120px);
	vertical-align: middle;
}

.profile_equipe .details .p,
.profile_equipe .details .r {
	display: inline-block;
	min-width: 50%;
	font-size: 16px;
	vertical-align: bottom;
}

.profile_equipe .details p {
	margin: 0;
}

/* --------------------- Titres --------------------- */

.titrepage {
	padding: 10px;
	color: #777777;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}

/* --------------------- Tableaux --------------------- */

.tab1,
.tabv {
	margin: auto;
	padding: 0px;
	width: 100%;
	border: 0px;
	background: none;
}

.tabv {
	max-width: 600px;
}

.tabv td {
	text-align: left;
}

.tab1 tr:nth-child(even) {
	background-color: #0000000a;
}

.tab1 thead th {
	text-align: left;
	border-bottom: 2px solid #00000044;
}

.tab1 tfoot th {
	border-top: 2px solid #00000044;
}

.tab1 th, .tab1 td {
	padding: 5px;
	text-align: left;
}

.tab2 {
	margin: auto;
	margin-top: 20px;
	padding: 0px;
	border: 0px;
	width: 600px;
	background: none;
}

.tab2 tr {
	border: 1px solid #E0E0E0;
}

.tab2 td {
	padding: 2px;
	text-align: left;
}

th.smallcol {
	position: relative;
	width: 30px;
	min-width: 30px;
}

thead th.smallcol span {
	position: absolute;
	bottom: 0;
	right: 23px;
	transform: rotate(45deg);
	transform-origin: bottom right;
	text-align: right;
}

tfoot th.smallcol span {
	position: absolute;
	top: 0;
	right: 23px;
	transform: rotate(-45deg);
	transform-origin: top right;
	text-align: right;
}

.tabcolor1,
.tabcolor2,
.tabcolor3,
.tabcolor4,
.tabcolor5 {
	margin-bottom: 15px;
	border-radius: 5px;
	background-color: #fdd;
}

.tabcolor2,
.tabcolor5 {
	background-color: #ddf;
}

.tabcolor3 {
	background-color: #dfd;
}

.titlecolor1,
.titlecolor2,
.titlecolor3,
.titlecolor4,
.titlecolor5 {
	margin: 3px;
	color: #700;
	text-align: left;
}

.titlecolor2,
.titlecolor5 {
	color: #007;
}

.titlecolor3 {
	color: #070;
}
/* --------------------- Cadres --------------------- */

#messageBox {
	position: fixed;
	padding: 10px;
	margin: auto;
	left: 50%;
	top: 50%;
	min-width: 250px;
	text-align: center;
	border-radius: 10px;
	background-color: #FFFFFF;
	transform: translate(-50%, -50%);
	z-index: 10001;
}

#messageBox .btn {
	margin: 5px;
}

#messageBoxFond {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: #000000aa;
	z-index: 10000;
}

#menu-consoles {
	float: left;
	height: 40px;
	width: 750px;
	padding-right: 5px;
	text-align: center;
}

#menu-consoles img {
	vertical-align: middle;
}

#menu-consoles-hidden {
	clear: both;
	float: left;
	width: 750px;
	padding-right: 10px;
	margin-top: 30px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	border: 1px solid #626262;
	border-top: none;
	background-color: #FFFFFF;
}

.menu-consoles-plus {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
}

.erreur {
	margin: 10px;
	padding: 2px;
	color: #ff2d2d;
	text-align: center;
	border: 1px double #ff2d2d;
	clear: both;
}

.bloc_titre {
	margin: 0px;
	padding: 0px;
	color: #FFFFFF;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	background-image: url("images/coins_haut.png");
	background-repeat: no-repeat;
	background-position: top right;
}

.bloc_titre_gauche {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 34px;
	height: 16px;
	background-color: #FFFFFF;
	background-image: url("images/coins_haut.png");
	background-repeat: no-repeat;
	background-position: top left;
}

.bloc_contenu {
	margin: 0px;
	padding: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-top: 0px;
	border-left: 0px;
	border-right: 2px solid #aaaaaa;
	border-bottom: 2px solid #aaaaaa;
	background-image: url("images/bloc_fond.jpg");
	background-position: right top;
	background-repeat: repeat-y;
}

.bloc_centre {
	clear: both;
	margin: auto;
	padding: 0px;
	margin-top: 20px;
	width: 600px;
	text-align: center;
	border-left: 2px solid #626262;
}

.bloc-liste1 {
	margin-left: 40px;
	margin-right: 40px;
}

.bloc-liste1 li {
	margin-bottom: 20px;
}

.bloc_bouton {
	margin: auto;
	padding: 5px;
	padding-bottom: 0px;
}

.bloc_bouton img {
	width: 16px;
	height: 16px;
	padding: 1px;
	border: 1px solid #444444;
	background-color: #DDDDDD;
}

.bloc_bouton img:hover {
	cursor: pointer;
	border: 1px solid #005AAD;
	background-color: #FFFFFF;
}

#liste {
	float: left;
	width: 275px;
}

#liste_scroll {
	overflow: auto;
	height: 450px;
	text-align: left;
}

.img_max1 {
	max-width: 400px;
	max-height: 2000px;
	border: 0px;
}

.img_tmb {
	width: 150px;
	border: 0px;
}

#mode-clair-sombre {
	position: fixed;
	right: 15px;
	bottom: 15px;
	width: 65px;
	min-width: unset;
	height: 65px;
	margin: unset;
	padding: 0;
	color: #fff;
	border-color: #000;
	background-color: #353c3e;
	border-radius: 50%;
}

#mode-clair-sombre-mobile {
	position: relative;
	float: right;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 15px;
	height: 34px;
	color: #fff;
	border: none;
	background: none;
}

.historique {
	padding: 0;
	padding-top: 30px;
	clear: both;
}

.historique > li {
	position: relative;
	margin-left: 30px;
	padding: 13px 25px 12px 30px;
	list-style-type: none;
	border-left: 3px solid #353c3e;
	transition-property: border-color;
	transition-duration: 0.3s;
}

.historique > li:last-child {
	border-left-color: transparent;
}

.historique .version {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	margin-left: -1px;
	padding-bottom: 10px;
	transform: translateX(-50%);
}

.historique .version div {
	position: sticky;
	top: 10px;
	width: 30px;
	height: 30px;
	color: #fff;
	line-height: 26px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: #e6001f;
	transition-property: background-color, border-color;
	transition-duration: 0.3s;
}

.historique li:last-child .version {
	height: auto;
}

.historique .version div::before {
	content: '';
	position: absolute;
	top: 11px;
	left: 30px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 21px 14px 0;
	border-color: transparent;
	border-right-color: #cfcfcf;
	transition-property: border-right-color;
	transition-duration: 0.3s;
}

.historique li:nth-child(even) .version div::before {
	border-right-color: #e3e3e3;
}

.historique li:first-child .version div::after {
	content: '';
	top: -25px;
	left: 50%;
	width: 10px;
	height: 25px;
	background-color: #fff;
	position: absolute;
	transform: translateX(-50%);
	transition-property: background-color;
	transition-duration: 0.3s;
}

.historique .infos {
	padding: 18px;
	padding-top: 0;
	padding-bottom: 17px;
	min-height: 355px;
	border-radius: 5px;
	background-color: #cfcfcf;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.historique li:nth-child(even) .infos {
	background-color: #e3e3e3;
}

.historique .infos > a {
	float: left;
	display: block;
	width: 400px;
	max-width: 100%;
	border: 3px solid transparent;
	border-radius: 7px;
	transition-property: border-color;
	transition-duration: 0.3s;
	overflow: hidden;
}

.historique .infos > a:hover {
	border-color: #e6001f;
}

.historique .infos div {
	margin-left: 415px;
}

.historique .infos h3 {
	position: sticky;
	top: 0;
	margin: 0;
	padding: 10px 0;
	color: #e6001f;
	background-color: #cfcfcf;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.historique li:nth-child(even) .infos h3 {
	background-color: #e3e3e3;
}

.historique .infos ul {
	text-align: left;
}

.historique .infos li {
	list-style: initial;
}

.historique .infos .equipe li {
	text-align: left;
	list-style: none;
}

.historique .infos div p {
	text-align: justify;
}

.historique .equipe {
	padding-bottom: 14px;
}

.historique .equipel {
	column-width: 200px;
}

.historique .afficher {
	display: block;
	padding: 0 15px;
	text-align: left;
	line-height: 40px;
	text-decoration: none;
	background-color: #0002;
	transition-property: background-color;
	transition-duration: 0.3s;
}

.historique .afficher:hover {
	background-color: #fff2;
}

.historique .a-afficher {
	display: none;
	background-color: #0002;
}

#diaporama {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000d;
	overflow-y: scroll;
	cursor: pointer;
	z-index: 1000;
}

#diaporama video {
	position: absolute;
	left: 50%;
	top: 15px;
	width: 835px;
	max-width: 81.35%;
	transform: translateX(-50%);
}

.diap-next,
.diap-prev {
	position: fixed;
	top: 50%;
	right: 30px;
	width: 76px;
	height: 76px;
	color: #000;
	font-size: 40px;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	transform: translateY(-50%);
}

.diap-prev {
	left: 30px;
	right: unset;
}

@media (min-width: 3800px) {
	.une {
		height: 375px;
	}

	.une.first {
		height: 750px;
	}
}

@media (max-width: 1900px) {
	.container {
		width: 1280px;
		max-width: 100%;
	}

	#feedlist {
		margin-left: 50%;
		transform: translateX(calc(-640px + 15px));
	}
}

/* Patch Bootstrap 3.4.1 */
@media (min-width: 1900px) {
	.container {
		width: 66.66666667%;
	}
}

@media (max-width: 1599px) {
	.bouton-login2 {
		font-size: 12px;
	}

	.une {
		height: 190px;
	}

	.une.first {
		height: 380px;
	}

	.une.first .titre h2 {
		font-size: 26px;
	}

	.une .titre h2 {
		width: calc(100% - 130px);
		font-size: 18px;
	}

	.une .tag {
		padding: 3px 14px;
		bottom: 20px;
		font-size: 18px;
	}

	.news {
		margin-top: 15px;
		padding: 0px 0px 0px 15px;
	}

	.riiconnect24 {
		margin: 15px -15px 0 0;
	}

	.sondage,
	.video {
		margin: 15px -15px 0 0;
	}

	.sondage h5 {
		font-size: 18px;
	}

	.sondage label {
		font-size: 16px;
	}

	.sondage .checkmark {
		top: 2px;
	}

	.tests {
		margin-top: 15px;
	}

	.test {
		height: 130px;
	}

	.test .lienimg {
		width: 130px;
		height: 130px;
	}

	.test .infos {
		margin-left: 140px;
		height: 130px;
	}

	.test .infos .note {
		left: -70px;
		bottom: 10px;
		z-index: 10;
	}
}

@media (max-width: 1278px) {
	#feedlist {
		margin-left: 15px;
		transform: none;
	}
}

@media (max-width: 1199px) {
	.navbar-brand img {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
	}

	.navbar-header {
		float: none;
		margin-right: -15px !important;
		margin-left: -15px !important;
	}

	.navbar-left, .navbar-right {
		float: none !important;
	}

	.navbar-toggle {
		display: block;
	}

	.navbar-collapse {
		position: absolute;
		padding: 0px;
		width: 100%;
		max-height: calc(-50px + 100vh);
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		background-color: #353c3e;
	}

	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}

	.container-fluid > .navbar-collapse {
		margin-right: -15px;
		margin-left: -15px;
	}

	.navbar-collapse.collapse {
		display: none !important;
		overflow-y: auto !important;
	}

	.navbar-nav {
		float: none !important;
		margin-top: 7.5px;
	}

	.navbar-nav > li {
		float: none;
		border-bottom: 1px solid #222;
	}

	.navbar-nav > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: left;
		line-height: normal !important;
	}

	.navbar-nav > li.active > a {
		background-color: transparent !important;
	}

	.navbar-nav > li.active > a:hover {
		background-color: #e6001f !important;
	}

	.une.first .titre h2 {
		font-size: 24px;
	}

	.une .titre h2 {
		font-size: 16px;
		line-height: 103%;
	}

	span span.nbnewmess {
		top: -9px;
		right: 12px;
		min-width: 15px;
		height: 15px;
		font-size: 12px;
		line-height: 15px;
	}

	#menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.sub-header,
	.toolbox,
	.searchbox,
	.social a {
		height: 42px;
	}

	.social .twitter > svg,
	.social .peertube > svg {
		height: 29px;
	}

	.social .bluesky > svg {
		height: 43px;
	}

	.sub-header {
		margin-top: 50px;
		overflow: hidden;
	}

	.social .feed {
		font-size: 37px;
	}

	.social .feed:hover,
	.social .feed:focus {
		color: #353c3e;
		background-color: inherit;
	}

	.social .feed:active {
		color: #fc902d !important;
		background-color: #fff;
		transition: none;
	}

	.social a {
		width: 42px;
		height: 42px;
		line-height: 42px;
		font-size: 35px;
	}

	.social .mattermost {
		font-size: 32px;
	}

	.social .matrix svg {
		height: 37px;
	}

	.social .twitch {
		font-size: 31px;
	}

	#feedlist {
		margin-left: 6px;
	}

	.menu {
		font-family: 'roboto';
	}

	#menuprofilmobile {
		margin-left: -15px;
	}

	.collapse.in {
		display: block !important;
	}

	.navbar-nav {
		margin: 0;
	}

	.menu-login {
		padding: 0;
		background: none;
	}

	.menu-login::after {
		content: none;
	}

	.mon-compte {
		margin: auto;
	}

	.bouton-login {
		width: auto;
	}

	.menu-login li {
		padding-left: 0;
		padding-right: 0;
	}

	.toolbox, .container {
		padding: 0;
	}

	.navjeux {
		border-right: none;
	}

	.menuv {
		margin-left: 0;
	}

	.menuv li a {
		padding-left: 7px;
		border-radius: 30px;
	}

	.btnmaside {
		display: block;
		z-index: 500;
	}

	.admin .annexe {
		z-index: 500;
	}

	.admin .annexe ~ aside {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #e0e0e0;
		z-index: 500;
	}

	.menuaside li a {
		margin-left: -15px;
		border-radius: 0;
	}

	.menuaside ul a {
		padding-left: 50px;
	}

	#corps {
		border: none;
	}

	.combouton {
		margin-bottom: 15px;
		padding: 0px 20px;
	}

	.combouton:hover,
	.combouton:focus {
		color: #fff;
		background-color: #e6001f;
	}

	.bloccom {
		position: relative;
	}

	.bloccom .anchor {
		position: absolute;
		top: -60px;
	}

	#footer {
		padding: 10px;
	}

	#getfirefox {
		padding: 0;
	}

	.historique .version div {
		top: 65px;
	}

	.historique .infos h3 {
		top: 49px;
	}

	.filtres .buttonbloc .liste {
		left: unset;
		right: 0;
		transform: unset;
	}

	.notifdirect {
		left: unset;
		right: 10px;
		bottom: 50%;
		transform: translateY(50%);
	}

	#btc {
		display: none;
	}
}

@media (max-width: 1024px) {
	#diaporama video {
		top: 1.5vw;
	}
}

@media (max-width: 991px) {
	.rownews {
		padding-right: 15px;
	}

	.sondage,
	.video {
		margin-left: -15px;
	}

	.riiconnect24 {
		margin-left: -15px;
		border-left: none;
	}

	#lecteur-direct iframe:last-child {
		width: 100%;
		max-height: unset;
	}

	.historique .infos > a {
		float: none;
		margin: auto;
		margin-bottom: 14px;
	}

	.historique .infos div {
		margin-left: 0;
	}

	.historique .afficher:hover {
		background-color: #0002;
	}

	.historique .afficher:active {
		background-color: #fff2;
		transition: none;
	}

	#diaporama #img {
		margin-bottom: 50px;
	}

	.diap-next, .diap-prev {
		top: unset;
		bottom: 0;
		left: 0;
		width: 50%;
		height: 50px;
		font-size: 35px;
		border-radius: unset;
		transform: unset;
	}

	.diap-next {
		left: unset;
		right: 0;
	}
}

@media (max-width: 767px) {
	.formlabel,
	label.formlabel {
		margin-bottom: 0;
	}

	.une.first {
		height: 190px;
	}

	.une.first .titre h2,
	.une .titre h2 {
		font-size: 18px;
		line-height: 117%;
	}

	.une .titre h2 img.emoji {
		width: 18px;
		height: 18px;
	}

	.news {
		width: 100%;
	}

	.article header:not(.alt) .imgentete,
	.article header:not(.alt) .imgentete::before {
		padding-bottom: 0;
		height: 305px;
	}

	article img {
		max-width: 100% !important;
	}

	.bloctitre .blocinfos {
		margin: auto;
	}

	.navjeux {
		position: absolute;
		display: none;
		margin-top: -15px;
		width: 100%;
		height: auto;
	}

	.navjeux li {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #c8c8c8;
	}

	.navjeux.x4 li {
		width: 100%;
	}

	.toolbox {
		position: relative;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.toolbox::before {
		content: '';
		position: fixed;
		top: 0;
		left: -30px;
		width: 30px;
		height: 42px;
		margin-top: 50px;
		background: linear-gradient(90deg, rgb(192, 192, 192) 20%, rgba(192,192,192,0.01) 100%);
		transition: all .3s;
	}

	.gradientleft::before {
		left: 0;
	}

	.toolbox::after {
		content: '';
		position: fixed;
		top: 0;
		right: 0;
		width: 30px;
		height: 42px;
		margin-top: 50px;
		background: linear-gradient(90deg, rgba(192,192,192,0.01) 0%, rgb(192, 192, 192) 80%);
	}

	.toolbox .social {
		padding-right: 20px;
		white-space: nowrap;
	}

	.search .navjeux {
		position: relative;
		display: block;
		margin: 0 -15px;
		height: 50px;
		width: auto;
	}

	.search .navjeux li {
		width: 50%;
		border-right: 1px solid #c8c8c8;
		border-bottom: 2px solid transparent;
	}

	.search .navjeux li.actif {
		line-height: 46px;
		border-bottom: 2px solid #e6001f;
	}

	.search .bloctitre .blocpochette,
	.membres .bloctitre .blocpochette {
		float: none;
		margin: 0 auto 10px;
		width: auto;
		height: auto;
	}

	.search .bloctitre .blocinfos,
	.membres .bloctitre .blocinfos {
		margin-left: 0;
	}

	.membres .bloctitre .blocinfos {
		min-height: auto;
	}

	.navjeuxmobile {
		margin: 15px -15px;
		color: #e6001f;
		font-size: 22px;
		line-height: 46px;
		border-bottom: 2px solid #e6001f;
		background-color: #e0e0e0;
		cursor: pointer;
		transition-property: all;
		transition-duration: 0.3s;
	}

	.navjeuxmobile.active {
		color: #fff;
		border-color: #fff;
		background-color: #353c3e;
	}

	.search .navjeux li:last-child {
		border-right: none;
	}

	.navjeuxmobile .fa {
		transition-property: transform;
		transition-duration: 0.3s;
	}

	.navjeuxmobile.active .fa {
		transform: translateY(2px) rotate(180deg);
	}

	.blocnavjeux .t18 {
		font-size: unset;
	}

	.combouton {
		font-size: 16px;
	}

	.bloccom,
	.blocposter {
		margin-left: 0;
	}

	.bloccom .auteur,
	.blocposter .auteur {
		float: none;
		margin-bottom: 0;
		padding-top: 0;
		width: auto;
		text-align: left;
	}

	.bloccom .auteur .avatar,
	.blocposter .auteur .avatar {
		float: left;
		margin-right: 5px;
		margin-bottom: 15px;
		width: 70px;
		height: 70px;
	}

	.bloccom .com,
	.blocposter .com {
		padding-left: 0;
	}

	.bloccom .com .date {
		height: 60px;
		line-height: normal;
	}

	.bloccom .com .message,
	.blocposter .com .postemessage {
		clear: both;
	}

	.bloccom .com .message::before {
		top: -6px;
		left: 29px;
		transform: rotate(135deg);
	}

	.blocposter .com .postemessage::before,
	.blocposter .com .postemessage::after {
		display: none;
	}

	.blocposter .com .options {
		margin: 0;
	}

	.blocposter .com .postemessage,
	.blocposter .com .postemessage textarea {
		border-radius: 0 0 5px 5px;
	}

	.boutonsmileys {
		display: inline-block !important;
	}

	.blocarticle article .lienimg {
		float: none;
		width: 100%;
	}

	.blocarticle article .lienimg .img {
		width: 100%;
	}

	.blocarticle article p {
		margin-left: 0;
		font-size: 16px;
	}

	.pagination a {
		margin: 0 3px;
	}

	.rowvideos {
		margin-bottom: 0;
	}

	.rowvideos .video {
		margin-bottom: 15px;
	}

	.blocnotation {
		float: none;
		margin: 0 0 10px;
		border-radius: 5px;
	}

	.bannererror img {
		max-height: 200px;
	}

	.profile_equipe {
		margin: 20px 0 !important;
		padding: 10px;
		border-radius: 20px !important;
	}

	.profile_equipe .avatar {
		display: block;
		margin: auto;
	}

	.profile_equipe .details {
		margin-bottom: 0;
		width: auto;
	}

	.article header .bloctitre {
		margin-top: -212px;
		text-align: center;
	}

	.article header.alt .bloctitre {
		margin-top: -55px;
	}

	.bloctitre .blocpochette {
		position: relative;
		margin: 0;
		height: 150px;
		width: 150px;
	}

	.bloctitre .avatar {
		margin: 0;
		min-height: 110px;
	}

	.bloctitre .blocpochette img {
		position: absolute;
		bottom: 0;
		left: 50%;
		display: block;
		margin: auto;
		transform: translateX(-50%);
	}

	.bloctitre .blocinfos {
		display: block;
		max-width: 100%;
	}

	.mp-message-entete .right {
		float: none;
	}

	#widgetIframe iframe {
		height: 860px;
	}

	.asidearticle .infos .tag {
		position: absolute;
		left: 5px;
		bottom: 5px;
		z-index: 10;
	}

	.asidearticle .infos .date {
		margin-left: 0;
	}

	#footer div div {
		margin-top: 20px;
	}

	#footer div:first-child {
		margin-top: 0;
	}

	#liens-utiles {
		margin-bottom: 0;
	}

	#licence {
		text-align: left;
	}

	#version {
		font-size: 14px;
	}
}

