@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

.clear {
	clear: both;
}
.viewHover {
	opacity: 0;
	transition: opacity 0.2s ease-in-out 0s;
}
.viewHover:focus,
.viewHover:hover {
	opacity: 1;
}

/*** Début Bouton Scroll Top ***/
#btn-back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
    min-width: 50px;
    z-index: 9999;
	display: none;
}
#btn-back-to-top:hover {
	animation-name: btnbacktotop;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@keyframes btnbacktotop {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0px);
	}
}
/*** Bouton Scroll Top - Fin ***/

/*** Sticky Element ***/
.sticky_scroll {
	position: fixed;
    top: 5rem;
    left: 5rem;
    z-index: 9;
}
/*** Sticky Element - Fin ***/

/*** Drapeau langues ***/
.lang_sec {
    width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: solid #e3e3e3 1px;
    border-radius: 1rem;
    margin: 0 0.5rem;
    padding: 0 0.5rem;
    text-decoration: none;
	position: relative;
}
.lang_sec .lang_flag {
    width: 3rem;
    height: 2rem;
    background-size: cover;
    background-position: center;
    transform: rotate(10deg);
	transition: transform 0.3s ease-in-out
}
.lang_sec:hover .lang_flag {
    transform: rotate(10deg) scale(1.1);
}
.lang_sec .lang_flag::before {
	content:'';
    background: #604535;
    width: 0.1rem;
    height: 3rem;
    display: block;
}
.lang_sec .lang_name {
	color: black;
}

.lang_sec .lang_active {
    position: absolute;
    left: -0.5rem;
    top: -0.8rem;
    font-size: 1.3rem;
}

.lang_sec_add {
    width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid #e3e3e3 1px;
    border-radius: 1rem;
    margin: 0 0.5rem;
    padding: 0 0.5rem;
    text-decoration: none;
}
.lang_sec_add .lang_flag {
    width: 3rem;
    height: 2rem;
    background-size: cover;
    background-position: center;
    transform: rotate(10deg);
}

.lang_bt {
    width: 1.5rem;
    display: inline;
    box-sizing: content-box;
}
.lang_bt:hover .lang_flag {
    transform: rotate(-5deg);
}
.lang_bt .lang_flag {
    width: 1.5rem;
    height: 1rem;
    background-size: cover;
    background-position: center;
    transform: rotate(10deg);
	transition: transform 0.1s ease-in-out;
}
.lang_bt .lang_flag::before {
	content:'';
    background: #604535;
    width: 0.05rem;
    height: 1.5rem;
    display: block;
}
.lang_bt_sec {
    background: #e9e9e9;
    width: min-content;
    display: inline-block;
    border-radius: 0.5rem;
    margin: 0 0.25rem;
}
.lang_bt_sec .count {
	
}
/*** Drapeau langues - Fin ***/

/*** Navbar ***/
.navbar .navbar-brand {
    display: flex;
}
.navbar .navbar-brand img {
    height: 2rem;
}
.navbar .navbar-brand span {
	line-height: 2rem;
}
.navbar .nav-item.dropdown.active {
	background: #0000000d;
}
/*** Navbar - Fin ***/

/*** Table ***/
.labelCheck {
    position: relative;
}
.labelCheck label {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.labelCheck label input {
	margin: 0;
}
.wikilink {
    color: black;
    text-decoration: none;
}
.wikilink:hover::before {
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f08e";
    margin-right: 0.4rem;
    font-size: 0.8rem;
}
table .dom {
	background: #FFFF99;
}
table .dompro {
	background: #FF99CC;
}
.inputfieldempty {
	background: #ff6161;
}
/*** Table - Fin ***/

/*** Table métier ***/
.rempl_input .row {
    z-index: 1;
    position: relative;
}
.table>:not(caption)>*>.rempl_input {
	padding: 2px 0.5rem 0px 0.5rem;
}
.rempl_input .domaine_name {
    top: 0.5rem;
    right: 0.5rem;
    z-index: 0;
}
/*** Table métier - Fin ***/

/*** Personnages ***/
.personnage {
	position: relative;
	font-family: 'Pacifico', cursive;
}
.personnage .cadre {
	width: 60%;
	margin-left: 20%;
	transform: scale(1);
	transition: all 0.3s ease-in-out 0s;
    margin-bottom: 3rem;
	z-index: 0;
    position: relative;
}
.personnage.avatarbio .cadre,
.personnage.avatarbre .cadre {
	width: 100%;
	margin-left: 0%;
    margin-bottom: 0;
}
.zonavatarbre .zonhover {
    width: 60%;
    height: 60%;
    margin-left: 10%;
    margin-top: 10%;
    z-index: 99999;
    position: absolute;
}
.zonhover:hover ~ .personnage:not(.myavatar) /*:not(.avatarbre)*/ .cadre{
	transform: scale(1.24);
	z-index: 1;
}
/*.personnage:not(.myavatar):hover /*:not(.avatarbre)*/ /*.cadre{
	transform: scale(1.24);
	z-index: 1;
}*/
.personnage .cadre > span,
.personnage .cadre > svg,
.personnage .cadre > img {
	position: absolute;
}
.personnage .cadre > span:first-child,
.personnage .cadre > svg:first-child ,
.personnage .cadre > img:first-child {
	background: #e3e3e3;
	border-radius: 50%;
}
.personnage .cadre > span:last-child,
.personnage .cadre > svg:last-child,
.personnage .cadre > img:last-child {
	position: static;
}
/*** Personnages - Fin ***/

/*** Cartes ***/
.container-carte {
	perspective: 100vw;
	height: 15vw;
	width: 10vw;
	margin: 2vw;
	padding: 0;
	border-radius: 1vw;
	position: relative;
}
.container-carte::after {
    content: '';
    display: block;
    position: absolute;
    background: grey;
    width: 8vw;
    height: 8vw;
    border-radius: 100%;
    box-shadow: 0 0 1vw black;
    transform: rotateX(90deg) translateY(-50%);
    top: 80%;
    left: 10%;
    opacity: 0.3;
	transition: all 0.3s ease-in-out;
}
.container-carte:hover::after {
    width: 6vw;
    left: 15%;
}
.container-carte:active::after {
    width: 8vw;
    left: 10%;
}

.container-carte .carte {
	background-size: cover;
	background-position: center center;
	height: 15vw;
	width: 10vw;
	border-radius: 1vw;
    border: outset 1px;
	
	filter: brightness(100%);
	cursor: pointer;
	transform-style: preserve-3d;
    transform: rotate3d(0) ;
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.container-carte:hover .carte {
	filter: brightness(80%);
    transform: rotate3d(0, 1, 0, 35deg);
}
.container-carte:active .carte {
	filter: brightness(113%);
    transform: rotate3d(0, 1, 0, -20deg);
}

.container-carte .carte_pile,
.container-carte .carte_face {
	background-size: cover;
	background-position: center center;
	height: 15vw;
	width: 10vw;
	border-radius: 1vw;
    border: outset 1px;
	cursor: pointer;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	overflow: hidden;
}
.container-carte .carte_pile {
	filter: brightness(100%);
    transform: rotate3d(0) ;
	transition: transform .8s ease, filter .8s ease;
}
.container-carte .carte_face {
	color: black;
	
	background: rgb(249,249,249);
	background: -moz-linear-gradient(90deg, rgba(249,249,249,1) 0%, rgba(219,225,226,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(249,249,249,1) 0%, rgba(219,225,226,1) 100%);
	background: linear-gradient(90deg, rgba(249,249,249,1) 0%, rgba(219,225,226,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9f9f9",endColorstr="#dbe1e2",GradientType=1);
	
	filter: brightness(200%);
	position:absolute;
	top:0;
    z-index: -1;
    transform: rotate3d(0, 1, 0, -180deg);
	transition: transform .8s ease, filter .8s ease;
}

.container-carte h3 {
    font-size: 1.45vw;
    line-height: 1.7vw;
    padding-right: 0.5vw;
    padding-left: 0.5vw;
}
.container-carte h4 {
    font-size: 1.1vw;
    line-height: 1.3vw;
    padding-right: 0.9vw;
    padding-left: 0.9vw;
}
.container-carte .carte_face p {
	overflow: hidden;
    font-size: 0.85vw;
    line-height: 1.3vw;
    padding-right: 0.9vw;
    padding-left: 0.9vw;
}

/* Retourne les cartes au Survol */
.container-carte:hover .carte_pile {
	filter: brightness(0%);
    transform: rotate3d(0, 1, 0, 180deg);
}
.container-carte:hover .carte_face {
	filter: brightness(100%);
    transform: rotate3d(0, 1, 0, 0deg);
}/**/
/* Retourne les cartes DIRECTEMENT [DEBUG] */
/*.container-carte .carte_pile {
	filter: brightness(0%);
    transform: rotate3d(0, 1, 0, 180deg);
}
.container-carte .carte_face {
	filter: brightness(100%);
    transform: rotate3d(0, 1, 0, 0deg);
}/**/

.container-carte:active .carte_face {
	filter: brightness(113%);
    transform: rotate3d(0, 1, 0, -20deg);
}

.container-carte .carte_pile span,
.container-carte .carte span {
	font-family: 'Pacifico', cursive;
	color: white;
    bottom: 1vw;
    position: absolute;
    right: 1vw;
    font-size: 1.1vw;
    line-height: 1.1vw;
}
@media (max-width: 915px) {

	.container-carte {
		perspective: 100vw;
		height: 60vw;
		width: 40vw;
		margin: 8vw;
		border-radius: 4vw;
	}
	.container-carte::after {
		width: 32vw;
		height: 8vw;
    	top: 100%;
		border-radius: 100%;
		box-shadow: 0 0 4vw black;
	}
	.container-carte:hover::after {
		width: 24vw;
	}
	.container-carte:active::after {
		width: 24vw;
	}
	.container-carte .carte {
		height: 60vw;
		width: 40vw;
		border-radius: 4vw;
	}
	.container-carte .carte span {
		bottom: 4vw;
		right: 4vw;
		font-size: 4.4vw;
		line-height: 4.4vw;
	}
	
}
/*** Cartes - Fin ***/

/*** Avatar ***/
.color_choice {
    width: 3rem;
    height: 3rem;
    display: inline-block;
    border-radius: 50%;
    margin-left: 1rem;
	cursor: crosshair;
}
.elem_choice {
    display: inline-block;
    margin-left: 1rem;
    line-height: 0;
    border: 2px solid transparent;
	background: #e3e3e3;
	cursor: crosshair;
}
.elem_zoom_center #Personnage {
	transform: scale(2) translateX(-25%) translateY(-25%);
}
.elem_zoom_bottom #Personnage {
	transform: scale(2) translateX(-25%) translateY(-40%);
}
.elem_zoom_top #Personnage {
	transform: scale(2) translateX(-25%) translateY(-10%);
}
.icon_part {
    width: 5rem;
    height: 5rem;
    border: solid 1px #c5c5c5;
	display: inline-block;
	position: relative;
}
.icon_part svg {
	position: absolute;
}
.icon_part svg:first-child {
	
}
.color_choice input,
.elem_choice input {
    visibility: hidden;/**/
	position: absolute;
}
.personnage.avatarbre {
    z-index: 3;
}
/*** Avatar - Fin ***/

/*** Arbre ***/
.arbre .row {
	padding: 0 !important;
}
.arbre .row > * {
	padding: 0 !important;
	position: relative;
}
.arbre .row .name {
	background: rgba(227,227,227,1.00);
	margin: 0 0.6vw;
	width: 8vw;
	height: 8vw;
	border-radius: 50%;
	line-height: 1.5vw;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.arbre .row .name > span {
	font-size: 1vw;
}
.arbre .topline {
	width: 1px;
	height: 1rem;
	background: red;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.arbre .topline.empty {
	width: 0px;
}
.arbre .bottomline {
	width: 1px;
	height: 1rem;
	background: red;
	margin-left: auto;
	margin-right: auto;
}
.arbre .horizline {
	content:'';
	width: 100%;
	height: 1px;
	background: red;
}
.arbre .horizrightline {
	content:'';
	width: 50%;
	height: 1px;
	background: red;
	margin-left: 50%;
}
.arbre .horizleftline {
	content:'';
	width: 50%;
	height: 1px;
	background: red;
}
.arbre .addnew {
	background: white;
	position: absolute;
	display: block;
	cursor: pointer;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
	color: #7cb342;
	line-height: 0.8rem;
	font-size: 1.2rem;
	text-align: center;
	box-sizing: content-box;
}
.arbre .addnew:hover {
	transform: translateX(-50%) translateY(-50%) scale(1.1);
}
.arbre herit h {
	background: #c1c1c1;
	width: 1vw;
	height: 1vw;
	display: inline-block;
	border-radius: 50%;
}
.arbre .heritage {
	padding: 0;
}
.arbre .heritage > li {
	list-style-type: none;
	font-style: italic;
}
.arbre .heritage ul {

}
.arbre .heritage ul li {
	list-style-type: none;
	display: inline-block;
	font-style: normal;
}
.arbre .heritage ul li::after {
	content:',';
}
.arbre .heritage ul li:last-child::after {
	content:'.';
}
/*** Arbre - Fin ***/

/*** Arbre : Héritage ***/
.arbre .cadrherit {
	padding: 10%;
}
.arbre heritjob {
    position: absolute;
    background: gray;
    width: 8%;
    height: 8%;
    border-radius: 50%;
    z-index: 2;
    opacity: 0.5;
	transition: all 0.3s ease-in-out 0s; 
}
.arbre heritjob:hover {
    opacity: 1;
}

.arbre heritjob.herit1 {
    bottom: 91%;
	left: 46%;
}

.arbre heritjob.herit2 {
    bottom: 90%;
    left: 36%;
}
.arbre heritjob.herit3 {
    bottom: 87%;
    left: 27%;
}
.arbre heritjob.herit4 {
    bottom: 82%;
    left: 18%;
}
.arbre heritjob.herit5 {
    bottom: 75%;
    left: 11%;
}
.arbre heritjob.herit6 {
    bottom: 66%;
    left: 5%;
}
.arbre heritjob.herit7 {
    bottom: 56%;
    left: 2%;
}

.arbre heritjob.herit8 {
    bottom: 46%;
    left: 1%;
}

.arbre heritjob.herit9 {
    bottom: 36%;
    left: 2%;
}
.arbre heritjob.herit10 {
    bottom: 26%;
    left: 5%;
}
.arbre heritjob.herit11 {
    bottom: 17%;
    left: 11%;
}
.arbre heritjob.herit12 {
    bottom: 10%;
    left: 18%;
}
.arbre heritjob.herit13 {
    bottom: 5%;
    left: 27%;
}
.arbre heritjob.herit14 {
    bottom: 2%;
    left: 36%;
}

.arbre heritjob.herit15 {
	bottom: 1%;
	left: 46%;
}

.arbre heritjob.herit16 {
    bottom: 2%;
    left: 56%;
}
.arbre heritjob.herit17 {
    bottom: 5%;
    left: 65%;
}
.arbre heritjob.herit18 {
    bottom: 10%;
    left: 74%;
}
.arbre heritjob.herit19 {
    bottom: 17%;
    left: 81%;
}
.arbre heritjob.herit20 {
    bottom: 26%;
    left: 87%;
}
.arbre heritjob.herit21 {
    bottom: 36%;
    left: 90%;
}

.arbre heritjob.herit22 {
    bottom: 46%;
    left: 91%;
}

.arbre heritjob.herit23 {
    bottom: 56%;
    left: 90%;
}
.arbre heritjob.herit24 {
    bottom: 66%;
    left: 87%;
}
.arbre heritjob.herit25 {
    bottom: 75%;
    left: 81%;
}
.arbre heritjob.herit26 {
    bottom: 82%;
    left: 74%;
}
.arbre heritjob.herit27 {
    bottom: 87%;
    left: 65%;
}
.arbre heritjob.herit28 {
    bottom: 90%;
    left: 56%;
}

.arbre heritjob.bt-perso {
    background: #e18e4f;
}
.arbre heritjob.bt-metier {
	background: #dc3545;
}
.arbre heritjob.bt-infos {
    background: #4982b7;
}
.arbre .cadrherit heritjob.bt-perso,
.arbre .cadrherit heritjob.bt-metier,
.arbre .cadrherit heritjob.bt-infos{
    font-size: 71%;
    text-align: center;
	/*opacity:0;*/
}
/*.arbre .cadrherit:hover heritjob.bt-perso,
.arbre .cadrherit:hover heritjob.bt-metier,
.arbre .cadrherit:hover heritjob.bt-infos{
	opacity:1;
}*/
.arbre .cadrherit heritjob.bt-perso i,
.arbre .cadrherit heritjob.bt-metier i,
.arbre .cadrherit heritjob.bt-infos i{
    color: white;
	opacity:0;
	transition: all 0.3s ease-in-out 0s; 
}
.arbre .cadrherit:hover heritjob.bt-perso i,
.arbre .cadrherit:hover heritjob.bt-metier i,
.arbre .cadrherit:hover heritjob.bt-infos i{
	opacity:1;
}
/*** Avatar : Héritage- Fin ***/

/***** Présentation pour petits écrans *****/
@media (max-width: 1400px) {

	
}
/****  CSS pour les smartphones ****/ 
@media (max-width: 1100px) {
	

}
@media (max-width: 915px) {

	.createpartieSection {
		max-height: 30vh;
	}
	
}
/***** Fin PrésentationFormulaires SMARTPHONES****/

@media print {
	
}