<style>

/* ==========================================                   ==========================================
   ===============================================  GLOBAL ===============================================
   ==========================================                   ========================================== */
@font-face {
	font-family: "Bahnschrift";
	src: url("bahnschrift.ttf");
}
@font-face {
    font-family: 'stencilregular';
    src: url('stencil-webfont.woff2') format('woff2'),
         url('stencil-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TrashHand';
    src: url('trashhand-webfont.woff2') format('woff2'),
         url('trashhand-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
	font-family: "Bahnschrift",sans-serif;
	margin: 0px;
	min-height: 100vh;
	background: radial-gradient(#c41a1a,#621515);
}
.font_style_Stencil {
	font-family: "Stencil_Std",sans-serif;
	color: white;
}
.font_style_TrashHand {
	font-family: "TrashHand",sans-serif;
	color: white;
}
header {
	height: 12vw;
	background-color: #0000001f;
	border: solid #0000003d 4px;
}
header #link_logo {
	position: relative;
	height: 90%;
	margin: 0px auto;
	display: block;
	top: 5.5%;
	width: 15%;
	transition-duration: 0.5s;
}
header #link_logo:hover {
	width: 15.5%;
}
#logo_header {
	width: 100%;
	position: relative;
}
#texte_logo {
	position: relative;
	display: block;
	text-align: center;
	bottom: 0.8vw;
	font-size: 1.4vw;
	text-transform: uppercase;
	color: white;
	text-shadow: black 0px 1px 4px;
}
#titre, #titre_post_publié {
	cursor: default;
	width: 55vw;
	position: relative;
	display: block;
	margin: 2vw auto;
	text-align: center;
	font-size: 2.5vw;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	text-shadow: black 0px 3px 7px;
}
.paragraph {
	display: block;
	position: relative;
	margin: 3vw auto;
	width: 59vw;
	font-size: 2vw;
	color: white;
	text-align: center;
	cursor: default;
	text-shadow: black 0px 3px 3px;
}
.subtitle {
	display: block;
	position: relative;
	margin: 3vw auto;
	width: 59vw;
	font-size: 2.5vw;
	color: white;
	text-align: center;
	cursor: default;
	text-shadow: black 0px 4px 6px;
}
.teaser_img {
	position: relative;
	display: block;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: black 0px 9px 25px;
	width: 38vw;
	margin: 0px 11vw;
	display: inline-block;
}
a {
	color: white;
	transition-duration: 0.4s;
}
a:hover {
	color: #2281d5;
}

/* ------------------------------------------------------ BARRE DE NAVIGATION ------------------------------------------------------ */

#barre_navigation {
	border-radius: 0px 0px 30% 30%;
	-webkit-box-shadow: inset 0 0 10px -7px #000,0 0 2px #000;
	box-shadow: inset 0 0 10px -7px #000,0 0 2px #000;
	background: #00000061;
	border: 1px solid #090909;
	border-top: 1px solid #0000003d;
	position: relative;
	width: 60%;
	height: 2.6vw;
	z-index: 0;
	text-align: center;
	margin: 0 auto;
	padding-top: 0.4em;
}
#barre_navigation ul {
	list-style: none outside none;
	margin: 0;
	padding: 0;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
#barre_navigation ul li {
	display: inline-block;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-position: right;
}
#barre_navigation > ul > li > a {
	position:relative;
	padding:0;
	color: #ffffffd6;
	font-weight:800;
	font-size: 1.4vw;
	display:inline-block;
	border-style:solid;
	border-width:0;
	position:relative;
	border-color:transparent;
	text-transform:uppercase;
	height:100%;
	background-color:transparent;
	-webkit-transition:color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	-o-transition:color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	transition:color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
}
#barre_navigation > ul > li:hover > a, #barre_navigation > ul > li.active > a {
	color: #61c375d1;
}
#barre_navigation > ul > li:hover > .construction, #barre_navigation > ul > li.active > .construction {
	cursor: not-allowed;
	color: #cfcfcf82;
	font-size: 1.4vw;
}

#barre_navigation > ul > li > a > span.item_inner {
	display: inline-block;
	padding: 0 19px;
	line-height: 36px;
	border-style: solid;
	border-width: 0;
	position: relative;
	border-color: transparent;
	background-color: transparent;
	-webkit-transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	-o-transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	-webkit-transition: border-color .2s ease-out,background-color .2s ease-out,-webkit-text-decoration .2s ease-out;
	transition: border-color .2s ease-out,background-color .2s ease-out,-webkit-text-decoration .2s ease-out;
	transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out,-webkit-text-decoration .2s ease-out;
}
#barre_navigation > ul > li > a > span.item_inner {
	line-height: 36px;
}

#boite_formulaire {
	position: relative;
	display: block;
	width: 22%;
	margin: 2% auto;
	padding: 3% 12%;
	background-color: #00000036;
	border-radius: 10px;
}
#boite_formulaire label {
	width: 100%;
	position: relative;
	display: block;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 1.7vw;
	background-color: #0003;
	margin: 2.5vh 0px;
	padding: 0.5vw 0vw;
	border-radius: 20px;
	transition-duration: 0.1s;
}
#boite_formulaire label:hover {
	background-color: #0000004f;
}
.champ_formulaire {
	position: relative;
	display: block;
	border: none;
	width: 100%;
	font-size: 1.4vw;
	border-radius: 5px;
	margin: 1.5vw 0px;
	height: 3vw;
	padding: 0.5vw;
	transform-origin: center;
	transition-duration: 0.4s;
}
.champ_formulaire:hover {
	transform: scale(1.04);
}
.champ_formulaire:focus {
	transform: scale(1.04);
}
#boite_formulaire textarea {
	position: relative;
	display: block;
	border: none;
	width: 100%;
	font-size: 1.1vw;
	border-radius: 5px;
	margin: 1.5vw 0px;
	height: 3vw;
	resize: none;
	transform-origin: center;
	transition-duration: 0.4s;
	animation-duration: 1s;
	padding: 0.5vw;
	overflow: hidden;
  	text-overflow: ellipsis; 
}
#boite_formulaire textarea:hover {
	transform: scale(1.04);
}
#boite_formulaire textarea:focus {
	width: 180%;
	height: 30%;
	transform: translateX(-22.5%);
	overflow: unset;
}
.bouton_submit {
	cursor: pointer;
	position: relative;
	display: block;
	width: 80%;
	margin: 2vw auto;
	padding: 1vw 0px;
	border-radius: 10px;
	border: none;
	text-transform: uppercase;
	font-size: 1.4vw;
	font-weight: bold;
	color: #5d0e0e;
	background-color: #f7f2f2;
	transition-duration: 0.4s;
}
.bouton_submit:hover {
	transform: scale(1.02);
	background-color: #5d0e0e;
	color: white;
}
#texte_finpage {
	background-color: #0000003d;
	font-size: 1vw;
	color: white;
	text-align: center;
	padding: 1.4vw;
	cursor: default;
	margin-top: 4vw;
}
hr {
	width: 150%;
	transform: translateX(-16%);
	color: white;
	margin: 2vw auto;
}
.texte, .notif {
	position: relative;
	display: block;
	text-align: center;
	color: white;
	font-size: 1.4vw;
	margin: 4vw auto;
}
#connexion {
	position: absolute;
	text-align: right;
	color: white;
	font-size: 1.3vw;
	top: 1vw;
	right: 4vw;
	transition-duration: 0.4s;
	width: 30vw;
	display: block ruby;
}
#connexion a {
	text-decoration: none;
}
#connexion a:hover {
	color: #fb9595;
}
.info {
	position: relative;
	display: block;
	background-color: #cd6e6e;
	margin: 2vw auto;
	font-size: 1.3vw;
	padding: 1vw 3vw;
	border-radius: 5px;
	transition-duration: 0.5s;
	animation-duration: 0.5s;
	cursor: default;
}
.info:hover {
	transform: translate(-2%, -2%);
	box-shadow: #0000008c 0.5vw 0.5vw 10px;
}
.info-longtexte {
	position: relative;
	display: block;
	background-color: #cd6e6e;
	margin: 2vw auto;
	font-size: 1.3vw;
	padding: 1vw 3vw;
	border-radius: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 2.8vw;
	transform-origin: center;
	transition-duration: 1s;
	animation-duration: 1s;
	width: 72.5%;
}
.info-longtexte:hover {
	width: 160%;
	transform: translateX(-24%);
	overflow: unset;
	height: auto;
	box-shadow: #0000008c 0.5vw 0.5vw 10px;
}
#modifier_bouton {
	position: relative;
	display: block;
	width: 20vw;
	margin: 1vw auto;
	height: 3vw;
}
#modifier_bouton button {
	cursor: pointer;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	border: none;
	text-transform: uppercase;
	font-size: 1.4vw;
	font-weight: bold;
	color: #5d0e0e;
	background-color: #f7f2f2;
	transition-duration: 0.4s;
}
#modifier_bouton button:hover {
	transform: scale(1.02);
	background-color: #5d0e0e;
	color: white;
}
#modif_succes, .notif {
	transition-duration: 3s;
	animation-delay: 2s;
	-webkit-transform-origin: right;
	    -ms-transform-origin: right;
	        transform-origin: right;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-name: popupNotif;
	        animation-name: popupNotif;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-timing-function: cubic-bezier(.21,-0.02,1,.24);
	        animation-timing-function: cubic-bezier(.21,-0.02,1,.24);
}
@-webkit-keyframes popupNotif {
	0%, 70% {
		opacity: 1;
		font-size: 1.5vw;
		margin: 4vw auto;
	}
	100% {
		opacity: 0;
		font-size: 0vw;
		margin: 0vw auto;
	}
}
@keyframes popupNotif {
	0%, 70% {
		opacity: 1;
		font-size: 1.5vw;
		margin: 4vw auto;
	}
	100% {
		opacity: 0;
		font-size: 0vw;
		margin: 0vw auto;
	}
}
.reset_bouton {
	position: relative;
	display: block;
	width: 20vw;
	margin: 1vw auto;
	height: 3vw;
	cursor: pointer;
	border-radius: 10px;
	border: none;
	text-transform: uppercase;
	font-size: 1.4vw;
	font-weight: bold;
	color: #5d0e0e;
	background-color: #f7f2f2;
	transition-duration: 0.4s;
}
.reset_bouton:hover {
	transform: scale(1.02);
	background-color: #5d0e0e;
	color: white;
}
.notifcopy, .notifcopy.copied {
	position: relative;
	background-color: #4f4f4f4d;
	text-align: center;
	width: 10vw;
	margin: 2vw auto;
	color: white;
	padding: 1vw 0px;
	border: white solid 2px;
	border-radius: 10px;
}
.notifcopy {
	display: none;
}
.notifcopy.copied {
	display: block;
}
#petit_bouton {
	position: absolute;
	display: block;
	width: 13vw;
	margin: 0.7vw;
	height: 2vw;
	right: 0px;
	top: 0px;
	transition: all 0.2s;
}
#petit_bouton:hover {
	top: -2px;
	right: 1px;
}
#petit_bouton button {
	cursor: pointer;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 1vw;
	font-weight: bold;
	color: #2a2828;
	background-color: #adacac;
	transition: all 0.2s;
	border: none;
	box-shadow: #5c5c5c 1px 2px 0px;
}
#petit_bouton button:hover {
	box-shadow: #b13c18 2px 4px 0px;
	color: #fff;
	background-color: #e4582d;
}
#carte_enfer {
	width: 77.5vw;
	position: relative;
	display: block;
	margin: 3vw auto;
	height: 55vw;
	box-shadow: 0vw 0.5vw 1vw #000000a8;
}
#carte_enfer svg {
	position: relative;
	display: block;
	width: 100%;
	border-radius: 1vw;
	height: 100%;
}
#message_infos {
	position: relative;
	display: block;
	width: 49vw;
	font-size: 1.5vw;
	margin: 0px auto;
	margin-top: 3vw;
	text-align: center;
	background-color: #c95a17;
	padding: 1vw;
	border-radius: 1vw;
}
.path_link path {
	fill: white;
	opacity: 0;
	transition-duration: 0.2s;
}
.path_link:hover path {
	opacity: 0.2;
}
.place_label {
	position: absolute;
	display: block;
	font-size: 1.9vw;
	text-shadow: 2px 0px 0px black;
	cursor: default;
	visibility: hidden;
	opacity: 0;
	transition-duration: 0.3s;
	color: white;
	font-family: stencilregular,sans-serif;
	text-align: center;
}
.displayed, .place_label:hover {
	visibility: visible;
	opacity: 1;
	transform: translateY(-2vw);
}
#titre_lieu {
	cursor: default;
	width: 50vw;
	position: relative;
	display: block;
	margin: 2vw auto;
	text-align: center;
	font-size: 2.5vw;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	text-shadow: black 0px 3px 7px;
	font-family: stencilregular,sans-serif;
	font
}
#labels_x5F_little_x5F_place {
	cursor: default;
}
.deactivated {
	cursor: not-allowed !important;
}
.deactivated path:hover {
	fill: #620d0d;
	opacity: 0.5;
}
#tartare_label {
	top: 41%;
	left: 39%;
}
.tartare_img {
	position: relative;
	display: block;
	width: 83vw;
	margin: 2vw auto;
}
#boisdespleurs_label {
	bottom: 21%;
	right: 30%;
}
#quartierdessuceidees_label {
	bottom: 23%;
	left: 38%;
}
#\39 3_label {
	bottom: 12vw;
	left: 16vw;
	font-size: 3vw;
}
#marais_label {
	bottom: 21vw;
	left: 18vw;
}
#champselysees_label {
	top: 24vw;
	right: 16.5vw;
}
#sortiedesames_label {
	top: 8vw;
	right: 1vw;
}
#consdamnes_label {
	bottom: 12vw;
	left: 19vw;
}
.pdf_embed {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 80vw;
	height: 60vw;
}
.background_music {
	visibility: hidden;
	display: none;
}

#choix_regles {
	position: relative;
	display: flex;
	margin: 1vw auto;
	width: 70vw;
	height: 4vw;
}
#choix_regles button {
	display: flow-root;
	margin: 0px 1vw;
	flex-basis: -moz-available;
	font-size: 1.3vw;
	font-family: stencilregular,sans-serif;
	color: white;
	background-color: #5d0e0e;
	border: none;
	transition-duration: 0.4s;
	transform-origin: center;
	cursor: pointer;
}
#choix_regles button:hover {
	color: #5d0e0e !important;
	background-color: white !important;
	transform: scale(1.1);
}
.bouton_survoler {
	color: #5d0e0e !important;
	background-color: white !important;
	transform: scale(1.1);
}
#choix_regles:hover .global {
	transform: translateX(-1vw) !important;
}
#choix_regles:hover .loots {
	transform: translateX(1vw) !important;
}
#choix_regles:hover .global:hover {
	transform: scale(1.1) translateX(-1vw) !important;
}
#choix_regles:hover .loots:hover {
	transform: scale(1.1) translateX(1vw) !important;
}
#deux i {
	position: relative;
	display: block;
	margin: 1vw auto;
	width: 90vw;
	color: white;
	text-align: center;
	font-size: 2vw;
}
#serveur_discord_iframe {
	width: 25vw;
	height: 31vw;
}
.sous-titre {
	position: relative;
	display: block;
	text-align: left;
	color: white;
	font-size: 2.4vw;
	margin: 1vw 16vw;
	width: 66vw;
	font-weight: bold;
	margin-top: 3vw;
}
.texte_ressources {
	position: relative;
	display: block;
	text-align: left;
	color: white;
	font-size: 1.4vw;
	margin: 3vw 16vw;
}
.liste {
	position: relative;
	display: block;
	margin: 1vw auto;
	width: 54vw;
	color: white;
}
.liste li {
	margin: 1.5vw 0px;
}
.spotify_embed {
	position: relative;
	display: block;
	margin: 0px auto;
	width: 54vw;
	height: 27vw;
}
.input_box {
	width: 22vw;
}
.input_box input[type="file"] {
	position: absolute;
	margin-top: 3px;
	margin-left: 3px;
	height: 1px;
	width: 1px;
	z-index: -5;
}
.input_file_button {
	display: block;
	background-color: #0000006b;
	position: relative;
	font-size: 1.1vw;
	text-align: center;
	border-radius: 22px;
	text-decoration: none;
	transition-duration: 0.5s;
	font-weight: bold;
	transform-origin: top;
	border: none;
	color: white;
	cursor: pointer;
	text-transform: uppercase;
}
.input_file_button:hover {
	transform: scale(1.05);
	background-color: #ffffffd9;
	color: #000000a3;
}
.input_file_button:active {
	transition-duration: 0.08s;
	color: white;
	background-color: #d720206b;
}
#ifb1 {
	width: 32vw;
	text-align: center;
	position: relative;
	padding: 7% 0px;
	left: -4.5vw;
	margin: 3vw auto;
	display: block;
}
#fiche_personnage {
	position: relative;
	display: block;
	width: 40vw;
	left: -9vw;
}
#modifier_bouton button a {
	width: 100%;
	height: 80%;
	position: relative;
	display: block;
	padding-top: 0.7vw;
	color: #5d0e0e;
	text-decoration: none;
}
#modifier_bouton button a:hover {
	color: white;
}
#corps_panel {
	position: relative;
	display: block;
	background-color: #0003;
	color: white;
	margin: 0 auto;
	width: 85vw;
	padding: 2vw;
	border-radius: 4vw;
}
.subtitle_panel {
	font-size: 2vw;
	text-transform: uppercase;
	margin: 1vw;
	width: max-content;
	font-weight: bold;
	text-shadow: black 0px 3px 7px;
}
#corps_panel hr {
	position: relative;
	width: 100%;
	transform: translateX(0);
	color: white;
	margin: 0 auto;
	margin-bottom: 2vw;
}
.section_panel {
	position: relative;
	display: block;
	font-size: 1.5vw;
	margin: 0 auto;
	width: 95%;
}

/* ============================================ POSTS =================================================== */

#retour_bouton {
	position: absolute;
	display: block;
	left: 7vw;
	top: 18vw;
}
#retour_bouton a {
	background-color: #00000042;
	padding: 1vw 2vw;
	border-radius: 34px;
	color: white;
	text-decoration: none;
	transform-origin: center;
	transition-duration: 0.4s;
	display: block;
}
#retour_bouton a:hover {
	transform: scale(1.05);
	background-color: #00000042;
}
#add_post {
	position: relative;
	display: block;
	width: 5vw;
	margin: 1vw auto;
	font-size: 4vw;
	height: 5vw;
}
#add_post a {
	text-decoration: none;
	border-radius: 5vw;
	background-color: #00000047;
	display: block;
	height: 89%;
	position: relative;
	padding: 5px 1.5vw;
	transition-duration: 0.4s;
}
#add_post a:hover {
	color: #aa1d1d;
	background-color: white;
}
#pas_de_posts {
	position: relative;
	display: block;
	margin: 5.5vw auto;
	width: 30vw;
	text-align: center;
	font-size: 1.5vw;
}
.post {
	width: 28%;
	position: relative;
	display: inline-block;
	margin: 1vw;
	background-color: #00000029;
	padding: 1vw;
	border-radius: 22px;
	transition-duration: 0.5s;
}
.post:hover {
	transform-origin: center;
	transform: translateY(-0.6vw);
	box-shadow: #00000096 0 0.6vw 14px;
	background-color: #ffffff08;
	cursor: default;
}
.titre_post {
	position: relative;
	display: block;
	width: 70%;
	margin: 0 auto;
	text-align: center;
	font-size: 1.5vw;
	text-transform: uppercase;
}
.status_post {
	position: relative;
	display: block;
	width: max-content;
	margin: 0.5vw auto;
	font-size: 1.2vw;
	font-style: italic;
}
.texte_post {
	position: relative;
	display: block;
	margin: 1vw auto;
	width: 95%;
	font-size: 0.8vw;
	font-weight: lighter;
	background-color: #00000061;
	padding: 0.5vw;
}
.embed_youtube_post {
	width: 83%;
	position: relative;
	display: block;
	margin: 0 auto;
}
.embed_youtube_post iframe {
	width: 100%;
	height: 11.3vw;
}
.delete_post {
	position: absolute;
	display: block;
	width: 2.6vw;
	height: 3.5vw;
	top: 0.3vw;
	padding: 0.3vw;
	border-radius: 0px;
	left: 1vw;
	transition-duration: 0.2s;
}
.delete_post:hover {
	background-color: #ffffff24;
	border-radius: 11px;
}
.delete_post a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../ressources/images/icons/delete_close.png");
	background-position: top left;
	background-size: cover;
	cursor: pointer;
}
.delete_post a:hover {
	background-image: url("../ressources/images/icons/delete_open.png");
}
.edit_post {
	position: absolute;
	display: block;
	width: 2.5vw;
	fill: white;
	top: 0.7vw;
	right: 0.7vw;
	transition-duration: 0.2s;
	padding: 0.3vw;
	height: 3.35vw;
}
.edit_post:hover {
	background-color: #ffffff21;
	border-radius: 11px;
}
.edit_post svg, .edit_post a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	fill: white;
}
/*============================ ADD POST =======================*/
#formulaire_post {
	position: relative;
	display: block;
	width: 70vw;
	margin: 0 auto;
}
#formulaire_post fieldset {
	padding: 1.5vw;
	border: 2px #ffffff40 dashed;
	cursor: default;
}
#formulaire_post legend {
	font-size: 2vw;
}
#formulaire_post label {
	position: relative;
	display: block;
	font-size: 1.6vw;
	text-decoration: underline;
}
#formulaire_post input[type=text] {
	border-radius: 15px;
	border: none;
}
#formulaire_post textarea {
	resize: none;
	width: 100%;
	border: none;
	margin: 1vw 0vw;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	padding: 1vw;
	font-family: sans-serif;
	height: 9vw;
	scroll-behavior: smooth;
	transform-origin: center;
	transition-duration: 0.3s;
	background-color: #ffffff1f;
	color: white;
}
#formulaire_post textarea:hover {
	transform: scale(1.01);
	cursor: pointer;
	background-color: #ffffff4a;
}
#formulaire_post textarea:focus {
	cursor: text;
	background-color: white;
	color: black;
}
#formulaire_post input[type=url] {
	position: relative;
	display: block;
	width: 50vw;
	margin: 1vw 0vw;
	padding: 0.6vw;
	font-size: 1.7vw;
	border-radius: 11px;
	transform-origin: center;
	transition-duration: 0.3s;
	background-color: #fff0;
	border: white 2px dashed;
	color: white;
}
#formulaire_post input[type=url]:hover {
	transform: scale(1.01);
	cursor: pointer;
	background-color: #ffffff26;
}
#formulaire_post input[type=url]:focus {
	cursor: text;
	border: white 2px solid;
	background-color: white;
	color: black;
}
#formulaire_post input[type=submit] {
	position: relative;
	display: block;
	margin: 1vw auto;
	font-size: 1.5vw;
	padding: 1vw 6vw;
	border: none;
	border-radius: 40px;
	background-color: #fff;
	color: #6b1212;
	font-weight: bold;
	cursor: pointer;
	margin-top: 2vw;
	transform-origin: center;
	transition-duration: 0.4s;
}
#formulaire_post input[type=submit]:hover {
	color: #fff;
	background-color: #0000004f;
	transform: scale(1.03);
}
#add_titre_post {
	position: relative;
	display: block;
	width: 55vw;
	margin: 2vw auto;
}
#add_titre_post label {
	display: inline;
	font-size: 2.7vw;
	text-transform: uppercase;
}
#add_titre_post input[type="text"] {
	display: inline-block;
	font-size: 2.4vw;
	text-transform: uppercase;
	margin: 0vw 3vw;
	width: 38vw;
	padding: 1vw;
	transform-origin: center;
	transition-duration: 0.3s;
	background-color: #fff0;
	border: white 2px dashed;
	color: white;
}
#add_titre_post input[type="text"]:hover {
	transform: scale(1.02);
	cursor: pointer;
	background-color: #ffffff26;
}
#add_titre_post input[type=text]:focus {
	cursor: text;
	border: white 2px solid;
	background-color: white;
	color: black;
}


/*========================= CHECKBOX POST =====================*/
.each_setting {
	margin: 1vw 4vw;
	width: 32%;
	height: 4vw;
	position: relative;
	display: block;
}
.each_setting .css-label {
	transform-origin: center;
	transform: scale(2.5) translateX(-2.5vw) rotate(0) !important;
	float: right;
	transition-duration: 0.5s;
}
.each_setting .css-label:hover {
	transform: scale(3) translateX(-2vw) rotate(360deg) !important;
	filter: drop-shadow(0px 0px 2px #f2882a);
}
.label_setting {
	display: inline-block;
	font-size: 2vw;
}
input[type=checkbox].css-checkbox {
	position:absolute;
	z-index:-1000;
	left:-1000px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height:1px;
	width:1px;
	margin:-1px;
	padding:0;
	border:0;
}
input[type="checkbox"].css-checkbox + label.css-label, input[type="checkbox"].css-checkbox + label.css-label-list {
	padding-left: 29px;
	height: 24px;
	display: inline-block;
	line-height: 24px;
	background-repeat: no-repeat;
	background-position: 2px 0;
	font-size: 24px;
	vertical-align: middle;
	cursor: pointer;
	top: 5px;
	transform-origin: center;
	transform: scale(1.3) translateY(0.3vw);
	z-index: 20;
}
input[type=checkbox].css-checkbox:checked ~ .css-label:hover {
	filter: drop-shadow(0px 0px 2px #18ad60);
}
input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 2px -24px;
}
label.css-label {
	background-image: url(../ressources/images/icons/checkbox_etat_post.png);
	background-size: 24px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition-duration: 0.3s;
}
label.css-label:hover {
	transform-origin: center !important;
	transform: scale(1.4) translateY(0.3vw) !important;
}
input[type=checkbox].css-checkbox:checked + label.css-label-list {
	background-position: 2px -24px;
}
label.css-label-list {
	background-image:url(../ressources/images/icons/checkbox_etat_post.png);
	background-size: 24px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition-duration: 0.3s;
	transform: scale(1.3) translate(0.5vw,0vw) !important;
}
label.css-label-list:hover {
	transform-origin: center !important;
	transform: scale(1.4) translate(0.5vw,0vw) !important;
}
/*====================== POSTS PUBLIÉS ===============================*/
.post_publié {
	width: 75%;
	position: relative;
	display: inline-block;
	margin: 1vw 2vw;
	background-color: #00000029;
	padding: 1vw;
	border-radius: 22px;
	transition-duration: 0.5s;
	margin-left: 9vw;
	text-decoration: none;
}
.post_publié:hover {
	transform-origin: center;
	transform: translateY(-0.6vw);
	box-shadow: #00000096 0 0.6vw 14px;
	background-color: #ffffff08;
	cursor: pointer;
	color: white;
}
.miniature_post {
	width: 24vw;
	margin: 1vw;
	position: relative;
	display: block;
	float: left;
	margin-right: 0vw;
}
.titre_post_publié {
	position: relative;
	display: block;
	width: 59%;
	margin: 1vw 0vw;
	text-align: left;
	font-size: 3vw;
	text-transform: uppercase;
	float: right;
	margin-bottom: 0.5vw;
}
.texte_post_publié {
	position: relative;
	display: block;
	margin: 1vw auto;
	width: 59%;
	font-size: 1.1vw;
	font-weight: lighter;
	text-align: left;
	float: right;
	margin-top: 0vw;
	height: 4.4vw;
}
#description_consulter_post {
	position: relative;
	display: block;
	width: 60vw;
	margin: 1vw auto;
	overflow-y: auto;
	height: min-content;
	max-height: 13vw;
}
.embed_youtube_post_publié {
	width: 80%;
	position: relative;
	display: block;
	margin: 0 auto;
	text-align: center;
}
.embed_youtube_post_publié iframe {
	width: 100%;
	height: 38vw;
	border-radius: 30px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}





/* ==========================================                ==========================================
   =============================================== MOBILE ===============================================
   ==========================================                ========================================== */











@media all and (max-device-width: 480px)
{

/* ==========================================                   ==========================================
   ===============================================  GLOBAL ===============================================
   ==========================================                   ========================================== */
body {
	margin: 0px;
}
header {
	height: 23vh;
	background-color: #0000001f;
	border: solid #0000003d 4px;
	padding-top: 7vw;
}
header #link_logo {
	position: relative;
	height: 90%;
	margin: 0px auto;
	display: block;
	top: 5.5%;
	width: 50%;
	transition-duration: 0.1s;
}
header #link_logo:hover {
	width: 53%;
}
#logo_header {
	width: 100%;
	position: relative;
}
#texte_logo {
	position: relative;
	display: block;
	text-align: center;
	bottom: 1.3vh;
	font-size: 2.2vh;
	text-transform: uppercase;
	color: white;
	text-shadow: black 0px 1px 4px;
}
#titre {
	cursor: default;
	width: 50vh;
	position: relative;
	display: block;
	margin: 3vh auto;
	text-align: center;
	font-size: 2.8vh;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	text-shadow: black 0px 3px 4px;
}
.paragraph {
	display: block;
	position: relative;
	margin: 6vw auto;
	width: 92vw;
	font-size: 4vw;
	color: white;
	text-align: center;
	cursor: default;
	text-shadow: black 0px 3px 3px;
}
.subtitle {
	display: block;
	position: relative;
	margin: 6vw auto;
	width: 90vw;
	font-size: 5vw;
	color: white;
	text-align: center;
	cursor: default;
	text-shadow: black 0px 4px 6px;
}
.teaser_img {
	position: relative;
	display: block;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: black 0px 9px 25px;
	width: 88vw;
	margin: 0px 6vw;
	display: inline-block;
}

/* ------------------------------------------------------ BARRE DE NAVIGATION ------------------------------------------------------ */

#barre_navigation {
	border-radius: 0px 0px 20% 20%;
	-webkit-box-shadow: inset 0 0 10px -7px #000,0 0 2px #000;
	box-shadow: inset 0 0 10px -7px #000,0 0 2px #000;
	background: #00000061;
	border: 1px solid #090909;
	border-top: 1px solid #0000003d;
	position: relative;
	width: 98%;
	height: 7.6vw;
	z-index: 0;
	text-align: center;
	top: 0px;
	margin: 0 auto;
	padding-top: 0px;
}
#barre_navigation ul {
	list-style: none outside none;
	margin: 0;
	padding: 0;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
#barre_navigation ul li {
	display: inline-block;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-position: right;
}
#barre_navigation > ul > li > a {
	position: relative;
	padding: 0;
	color: #ffffffd6;
	font-weight: 800;
	font-size: 2.3vw;
	display: block;
	border-style: solid;
	border-width: 0;
	position: relative;
	border-color: transparent;
	text-transform: uppercase;
	height: 100%;
	background-color: transparent;
	-webkit-transition: color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	-o-transition: color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	transition: color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
}
#barre_navigation > ul > li:hover > a, #barre_navigation > ul > li.active > a {
	color: #61c375d1;
}
#barre_navigation > ul > li:hover > .construction, #barre_navigation > ul > li.active > .construction {
	cursor: not-allowed;
	color: #cfcfcf82;
	font-size: 3vw;
}

#barre_navigation > ul > li > a > span.item_inner {
	display: inline-block;
	padding: 0 11px;
	line-height: 36px;
	border-style: solid;
	border-width: 0;
	position: relative;
	border-color: transparent;
	background-color: transparent;
	-webkit-transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	-o-transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	-webkit-transition: border-color .2s ease-out,background-color .2s ease-out,-webkit-text-decoration .2s ease-out;
	transition: border-color .2s ease-out,background-color .2s ease-out,-webkit-text-decoration .2s ease-out;
	transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out;
	transition: text-decoration .2s ease-out,border-color .2s ease-out,background-color .2s ease-out,-webkit-text-decoration .2s ease-out;
}
#barre_navigation > ul > li > a > span.item_inner {
	line-height: 0px;
	margin-top: 3.6vw;
}


#boite_formulaire {
	position: relative;
	display: block;
	width: 67%;
	margin: 2% auto;
	padding: 5% 9%;
	background-color: #00000036;
	border-radius: 10px;
}
#boite_formulaire label {
	width: 100%;
	position: relative;
	display: block;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 6vw;
	background-color: #0003;
	margin: 7vw 0px;
	padding: 3.5vw 0vw;
	border-radius: 20px;
	transition-duration: 0.1s;
}
#boite_formulaire label:hover {
	background-color: #0000004f;
}
.champ_formulaire {
	position: relative;
	display: block;
	border: none;
	width: 100%;
	font-size: 6vw;
	border-radius: 5px;
	margin: 1.5vw 0px;
	height: 13vw;
	padding: 1vh;
	transform-origin: center;
	transition-duration: 0.4s;
}
.champ_formulaire:focus {
	transform: scale(1.04);
}
#boite_formulaire textarea {
	position: relative;
	display: block;
	border: none;
	width: 100%;
	font-size: 6vw;
	border-radius: 5px;
	margin: 1.5vw 0px;
	height: 13vw;
	padding: 1vh;
	transform-origin: center;
	transition-duration: 0.4s;
	resize: none;
	animation-duration: 1s;
	padding: 1vh;
	overflow: hidden;
	box-shadow: #000000ab 0px 0px 0px;
}
#boite_formulaire textarea:focus {
	width: 101vw;
	height: 55vw;
	transform: translateX(-17vw);
	overflow: unset;
	box-shadow: #000000ab 0px 6px 13px;
}
.bouton_submit {
	position: relative;
	display: block;
	width: 80%;
	margin: 3vh auto;
	padding: 3vw 0px;
	border-radius: 10px;
	border: none;
	text-transform: uppercase;
	font-size: 2.5vh;
	font-weight: bold;
	color: #5d0e0e;
	background-color: #f7f2f2;
	margin-top: 5vh;
}
#texte_finpage {
	background-color: #0000003d;
	font-size: 3vw;
	color: white;
	text-align: center;
	padding: 4vw;
	cursor: default;
	margin-top: 12vw;
}
hr {
	width: 115%;
	transform: translateX(-8%);
	color: white;
	margin: 2vw auto;
	margin-top: 7vw;
}
.texte, .notif {
	position: relative;
	display: block;
	text-align: center;
	color: white;
	font-size: 6.4vw;
	margin: 4vw auto;
}
#connexion {
	position: absolute;
	text-align: right;
	color: white;
	font-size: 4.3vw;
	top: 3vw;
	right: 8vw;
	transition-duration: 0.4s;
	width: 80vw;
	display: block ruby;
}
#connexion:hover {
	transform: scale(1.05);
}
#connexion a {
	text-decoration: none;
}
#connexion a:hover {
	color: #fb9595;
}
.info {
	position: relative;
	display: block;
	background-color: #cd6e6e;
	margin: 6vw auto;
	font-size: 5.3vw;
	padding: 2vw 3vw;
	border-radius: 5px;
	transition-duration: 0.5s;
	animation-duration: 0.5s;
}
.info:hover {
	transform: translate(-2%, -2%);
	box-shadow: #0000008c 0.5vw 0.5vw 10px;
}
.info-longtexte {
	position: relative;
	display: block;
	background-color: #cd6e6e;
	margin: 6vw auto;
	font-size: 5.3vw;
	padding: 3vw 3vw;
	border-radius: 5px;
	height: 13vw;
	transform-origin: center;
	transition-duration: 0.4s;
	animation-duration: 1s;
	overflow: hidden;
	text-overflow: ellipsis;
}
.info-longtexte:hover {
	width: 137%;
	transform: translateX(-16%);
	overflow: unset;
	height: auto;
	box-shadow: #0000008c 0.5vw 0.5vw 10px;
	font-size: 4vw;
}
#modifier_bouton {
	position: relative;
	display: block;
	width: 43vw;
	margin: 6vw auto;
	height: 15vw;
}
#modifier_bouton button {
	cursor: pointer;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	border: none;
	text-transform: uppercase;
	font-size: 5vw;
	font-weight: bold;
	color: #5d0e0e;
	background-color: #f7f2f2;
	transition-duration: 0.4s;
}
#modifier_bouton button:hover {
	transform: scale(1.02);
	background-color: #5d0e0e;
	color: white;
}
#modif_succes, .notif {
	transition-duration: 5s;
	animation-delay: 5s;
	-webkit-transform-origin: right;
	    -ms-transform-origin: right;
	        transform-origin: right;
	-webkit-animation-duration: 5s;
	        animation-duration: 5s;
	-webkit-animation-name: popupNotif;
	        animation-name: popupNotif;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-timing-function: cubic-bezier(.21,-0.02,1,.24);
	        animation-timing-function: cubic-bezier(.21,-0.02,1,.24);
}
@-webkit-keyframes popupNotif {
	0%, 70% {
		opacity: 1;
		font-size: 6vw;
		margin: 4vw auto;
	}
	100% {
		opacity: 0;
		font-size: 0vw;
		margin: 0vw auto;
	}
}
@keyframes popupNotif {
	0%, 70% {
		opacity: 1;
		font-size: 6vw;
		margin: 4vw auto;
	}
	100% {
		opacity: 0;
		font-size: 0vw;
		margin: 0vw auto;
	}
}
.reset_bouton {
	position: relative;
	display: block;
	width: 43vw;
	margin: 2vw auto;
	height: 15vw;
	cursor: pointer;
	border-radius: 10px;
	border: none;
	text-transform: uppercase;
	font-size: 5vw;
	font-weight: bold;
	color: #5d0e0e;
	background-color: #f7f2f2;
	transition-duration: 0.4s;
}
.reset_bouton:hover {
	transform: scale(1.02);
	background-color: #5d0e0e;
	color: white;
}
.notifcopy, .notifcopy.copied {
	position: relative;
	background-color: #4f4f4f4d;
	text-align: center;
	width: 30vw;
	margin: 2vw auto;
	color: white;
	padding: 1vw 0px;
	border: white solid 2px;
	border-radius: 10px;
}
#petit_bouton {
	position: absolute;
	display: block;
	width: 37vw;
	margin: 1.5vw;
	height: 7vw;
	right: 0px;
	top: 0px;
	transition: all 0.2s;
}
#petit_bouton:hover {
	top: -2px;
	right: 1px;
}
#petit_bouton button {
	cursor: pointer;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 3vw;
	font-weight: bold;
	color: #2a2828;
	background-color: #adacac;
	transition: all 0.2s;
	border: none;
	box-shadow: #5c5c5c 1px 2px 0px;
}
#petit_bouton button:hover {
	box-shadow: #b13c18 2px 4px 0px;
	color: #fff;
	background-color: #e4582d;
}
#choix_regles {
	margin: 5vw auto;
	width: 95vw;
	height: 14vw;
}
#choix_regles button {
	font-size: 3.3vw;
}
#deux i {
	font-size: 5vw;
}
.tartare_img {
	width: 97vw;
}
#titre_lieu {
	margin: 5vw auto;
	font-size: 6.5vw;
}
#carte_enfer {
	width: 96.5vw;
	height: 68vw;
}
#serveur_discord_iframe {
	position: relative;
	display: block;
	margin: 7vw auto;
	width: 89vw;
	height: 70vw;
}
.texte_ressources {
	font-size: 3.4vw;
	margin: 3vw 7vw;
}
.sous-titre {
	width: 86vw;
	margin: 1vw 7vw;
	font-size: 6vw;
}
.liste {
	margin: 1vw auto;
	width: 80vw;
	font-size: 3vw;
	margin: 5vw auto;
}
.liste li {
	margin: 2vw 0px;
}
.spotify_embed {
	position: relative;
	display: block;
	margin: 0px;
	width: 85vw;
	height: 133vw;
	left: -8vw;
}
#fiche_personnage {
	position: relative;
	display: block;
	width: 96vw;
	left: -15vw;
}
#ifb1 {
	width: 74vw;
	text-align: center;
	position: relative;
	padding: 7% 0px;
	left: -4.5vw;
	margin: 3vw auto;
	display: block;
	font-size: 2.6vw;
}
.miniature_post {
	width: 45vw;
	margin: 1vw auto !important;
	display: block;
	float: none;
}
.texte_post_publié {
	float: none;
	max-height: 38vw;
	width: 74%;
	font-size: 3.2vw;
	text-decoration: none !important;
	height: max-content;
	margin: 3vw auto !important;
	text-align: justify;
}
#description_consulter_post {
	width: 66vw;
	max-height: 45vw;
	font-size: 3vw;
}
.embed_youtube_post_publié {
	width: 90%;
	margin: 5vw auto;
}
.embed_youtube_post_publié iframe {
	height: 49vw;
	border-radius: 25px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
#corps_panel {
	width: 95vw;
}
.post_publié {
	width: 92%;
	display: block;
	margin: 2vw auto !important;
}
.miniature_post {
	width: 70vw;
}
.titre_post_publié {
	width: 93%;
	margin: 3vw auto;
	text-align: center;
	font-size: 6vw;
}
#retour_bouton {
	top: 61vw;
	font-size: 5vw;
	left: 3vw;
}
#retour_bouton a {
	padding: 2vw 6vw;
}
#titre_post_publié {
	cursor: default;
	width: 50vh;
	position: relative;
	display: block;
	margin: 3vh auto;
	margin-top: 18vw;
	text-align: center;
	font-size: 2.8vh;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	text-shadow: black 0px 3px 4px;
}

}

</style>