/*****************STYLE GENERAL*****************/

@import url("../global/polices_mtg.css");
@import url("../global/icones_mana.css");
@import url("../global/bouton_mtg_1.css");

/*Titres alignés au centre de la page*/
h1 {
	text-align: center;
	font-family: beleren;
	text-shadow: 2px 2px 2px #FB793F;
	color: white;
}


/*Enlève la couleur de merde d'auto-complétion, seulement pour 2 mois*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000000s ease-in-out 0s;
}

/*Enlève la bordure de merde autour du formulaire selectionné*/
*:focus {
	outline: none;
}

/*****************STYLE INDEX*****************/

/*boite du formulaire, là où se trouvera l'image de la carte aléatoire*/
.boite-carte {
	background-repeat: no-repeat;
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-height: 523px;
	max-width: 375px;
	min-height: 523px;
	min-width: 375px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*Fond de la carte et sa couleur connexion (random)*/
.fond-carte-multicolore-1{
	background-image: url("../../ressources/img/connexion/fond_carte/multicolore_1.png");
}
.fond-carte-multicolore-2{
	background-image: url("../../ressources/img/connexion/fond_carte/multicolore_2.png");
}
.fond-carte-incolore-1{
	background-image: url("../../ressources/img/connexion/fond_carte/incolore_1.png");
}
.fond-carte-incolore-2{
	background-image: url("../../ressources/img/connexion/fond_carte/incolore_2.png");
}
.fond-carte-artefact-1{
	background-image: url("../../ressources/img/connexion/fond_carte/artefact_1.png");
}
.fond-carte-artefact-2{
	background-image: url("../../ressources/img/connexion/fond_carte/artefact_2.png");
}
.fond-carte-bleu-1{
	background-image: url("../../ressources/img/connexion/fond_carte/bleu_1.png");
}
.fond-carte-bleu-2{
	background-image: url("../../ressources/img/connexion/fond_carte/bleu_2.png");
}
.fond-carte-blanc-1{
	background-image: url("../../ressources/img/connexion/fond_carte/blanc_1.png");
}
.fond-carte-blanc-2{
	background-image: url("../../ressources/img/connexion/fond_carte/blanc_2.png");
}
.fond-carte-noir-1{
	background-image: url("../../ressources/img/connexion/fond_carte/noir_1.png");
}
.fond-carte-noir-2{
	background-image: url("../../ressources/img/connexion/fond_carte/noir_2.png");
}
.fond-carte-rouge-1{
	background-image: url("../../ressources/img/connexion/fond_carte/rouge_1.png");
}
.fond-carte-rouge-2{
	background-image: url("../../ressources/img/connexion/fond_carte/rouge_2.png");
}
.fond-carte-vert-1{
	background-image: url("../../ressources/img/connexion/fond_carte/vert_1.png");
}
.fond-carte-vert-2{
	background-image: url("../../ressources/img/connexion/fond_carte/vert_2.png");
}

/*Position du form*/
.boite-form {
	height: 135px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/*Position de la div dans le form, emplacement de l'image sur la carte*/
.boite-image {
	min-width: 316px;
	min-height: 232px;
	height: 90%;
	width: 100%;
	position: relative;
	bottom: 100%;
}

/*Style du formulaire pseudo et mdp connexion*/
.boite-pseudo, .boite-mdp {
	text-align: center;
	background: url('../../ressources/img/connexion/fond_input/fond_input.png');
	display: flex;
	margin-top: 20px;
	margin-right: 5px;
	padding: 8px 0;
	display: flex;
	justify-content: space-between;
	border-radius: 18px/40px;
	border-bottom: 4px solid #a9a9a9;
	border-left: 2px solid #a9a9a9;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 90%;
	margin-left: 5%;
}

/*Couleur du contour de form connexion (random)*/
.shadow-multicolore {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #edd06f, -3px 3px 2px 5px #171314;
}

.shadow-artefact {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #f1f4f5, -3px 3px 2px 5px #171314;
}

.shadow-vert {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #0f7441, -3px 3px 2px 5px #171314;
}

.shadow-bleu {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #0c70b0, -3px 3px 2px 5px #171314;
}

.shadow-noir {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #262623, -3px 3px 2px 5px #171314;
}

.shadow-blanc {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #fbfbfa, -3px 3px 2px 5px #171314;
}

.shadow-rouge {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #c13529, -3px 3px 2px 5px #171314;
}

.shadow-incolore {
	box-shadow: 0 0 0 2px #171314, 0 0 0 5px #928075, -3px 3px 2px 5px #171314;	
}

/*Style du Form*/
form {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*Style du formulaire pour l'identifiant et le mot de passe pour la connexion*/
.form-connexion {
	background-color: #00000000;
	display: flex;
	margin-right: 5px;
	padding: 8px 0;
	display: flex;
	justify-content: space-between;
	border-radius: 18px/40px;
	width: 100%;
	margin-left: 2%;
}

/*Bouton de connexion*/
.bouton-connexion {
	background: linear-gradient( 300deg, #FECF77, #FB793F );
	color: white;
	padding: 12px 20px;
	margin-top: 320px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: bottom;
	font-family: beleren;
	font-size: 20px;
}

/*****************STYLE ACCUEIL*****************/



/*****************STYLE EDITER CARTE*****************/

.form-carte {
	background: url('../../ressources/img/connexion/fond_input/fond_input.jpg');
	display: flex;
	margin-right: 5px;
	padding: 8px 0;
	display: flex;
	justify-content: space-between;
	border-radius: 18px/40px;
	width: 100%;
	margin-left: 2%;
}

.form-carte-textarea {
	background: url('../../ressources/img/connexion/fond_input/fond_input.png');
	display: flex;
	margin-right: 5px;
	padding: 8px 0;
	display: flex;
	justify-content: space-between;
	border-radius: 18px/40px;
	width: 100%;
	margin-left: 2%;
	resize: none;
	overflow: none;
	border-width: 2px;
	border-style: inset;
	border-color: -internal-light-dark(#767676, #858585);
	border-image: initial;
}


html {
	background-image: url(../../ressources/img/global/arriere_plans/fond_index.png);
	background-repeat: no-repeat;
	background-position: -5vw min(-25%, -25vh);
	background-size: max(110%, 110vw) max(150%, 150vh);
}


.boite-texte-carte {
	position: absolute;
	top: 415px;
	left: calc(50vw - 158px);
	width: 305px;
	height: 125px;
}

.fond-texte-carte-1 {
	background: url('../../ressources/img/connexion/texte_carte/texte_1.png');
	background-size: 305px;
}
.fond-texte-carte-2 {
	background: url('../../ressources/img/connexion/texte_carte/texte_2.png');
	background-size: 305px;
}
.fond-texte-carte-3 {
	background: url('../../ressources/img/connexion/texte_carte/texte_3.png');
	background-size: 305px;
}
.fond-texte-carte-4 {
	background: url('../../ressources/img/connexion/texte_carte/texte_4.png');
	background-size: 305px;
}
.fond-texte-carte-5 {
	background: url('../../ressources/img/connexion/texte_carte/texte_5.png');
	background-size: 305px;
}



.boite-rarete {
	position: absolute;
	top: 378px;
	left: calc(50vw + 135px);
	width: 20px;
	height: 23px;
}

.rarete-c {
	background: url('../../ressources/img/connexion/pate_extension/pate_c.png');
	background-size: 20px;
}
.rarete-u {
	background: url('../../ressources/img/connexion/pate_extension/pate_u.png');
	background-size: 20px;
}
.rarete-r {
	background: url('../../ressources/img/connexion/pate_extension/pate_r.png');
	background-size: 20px;
}
.rarete-m {
	background: url('../../ressources/img/connexion/pate_extension/pate_m.png');
	background-size: 20px;
}
.rarete-s {
	background: url('../../ressources/img/connexion/pate_extension/pate_s.png');
	background-size: 20px;
}

.boite-type {
	position: absolute;
	top: 378px;
	left: calc(50vw - 155px);
	width: 310px;
	height: 24px;
	font-family: 'mplantin';
	font-size: 20px;
	font-weight: bold;
}

.boite-numero-de-serie {
	position: absolute;
	top: 570px;
	left: calc(50vw - 159px);
	width: 310px;
	height: 24px;
	font-family: 'mplantin';
	font-size: 9px;
	letter-spacing: 1.2px;
	color: #dddddd;
}


.boite-mana-1 {
	position: absolute;
	top: 110px;
	left: calc(50vw + 135px);
	width: 21px;
	height: 23px;
}

.boite-mana-2 {
	position: absolute;
	top: 110px;
	left: calc(50vw + 113px);
	width: 21px;
	height: 23px;
}

.boite-mana-3 {
	position: absolute;
	top: 110px;
	left: calc(50vw + 91px);
	width: 21px;
	height: 23px;
}

.boite-mana-4 {
	position: absolute;
	top: 110px;
	left: calc(50vw + 69px);
	width: 21px;
	height: 23px;
}

.boite-mana-5 {
	position: absolute;
	top: 110px;
	left: calc(50vw + 47px);
	width: 21px;
	height: 23px;
}

.boite-mana-6 {
	position: absolute;
	top: 110px;
	left: calc(50vw + 25px);
	width: 21px;
	height: 23px;
}