.set {
	column-width: 25em;
}

.statistiques {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.stat {
	display: grid;
	grid-template-columns: repeat(7, max-content);
	grid-column-gap: 5px;
	justify-items: center;
	.titre { grid-column: 1 / span 7; justify-self: center; }
	.value { grid-column: 2; }
	.nbr { grid-column: 3; }
	.slash { grid-column: 4; }
	.total { grid-column: 5; }
	.arrow { grid-column: 6; }
	.pct { grid-column: 7; }


}

.cartes {
	display: grid;
	grid-template-columns: max-content auto repeat(3, minmax(1em, max-content));
	grid-column-gap: 5px;
	align-items: center;
	justify-items: center;
	.faction { grid-column: 1; }
	.name { grid-column: 2; }
	.c { grid-column: 3; }
	.r1 { grid-column: 4; }
	.r2 { grid-column: 5; }
	.c, .r1, .r2 {
		display: flex;
		gap: 5px;
	}
}

.ligne {
	display: contents; 
}

.ligne span {
	position: relative;
	z-index: 2;
}

.ligne:hover div  {
	background-color: #202020;
	z-index: 0;
}

.ajax {
	cursor: pointer;
}

#ajout td, #ajout th {
	text-align: center;
}
#searchCarte { width: 25em; }
#searchRarete { width: 5em; }
#searchUnique { width: 4em; }

#composition .cartes {
	display: grid;
	grid-template-columns: max-content max-content auto max-content;
	grid-column-gap: 5px;
}

#composition .cartes {
	img { max-width: 1em; }
	.faction { grid-column: 1; }
	.rarete { grid-column: 2; }
	.nom { grid-column: 3; justify-self: start; }
	.nbr { grid-column: 4; display: flex; gap: 5px;}
}


.icon {
	max-height: 1em;
	max-width: 1em;
}

.name {
	justify-self: start;
}

.rare {
	color: lightblue;
}

.oof {
	color: lightblue;
}

.fact_background {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: baseline;
}

.fact_background::before {
	content: '';
	position: absolute;
	top: 0;
	left: -0.25em;
	width: 1em;
	height: 1em;
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.5;
	z-index: -1;
}

.AX::before { background-image: url('/images/altered/AX.png'); }
.BR::before { background-image: url('/images/altered/BR.png'); }
.LY::before { background-image: url('/images/altered/LY.png'); }
.MU::before { background-image: url('/images/altered/MU.png'); }
.OR::before { background-image: url('/images/altered/OR.png'); }
.YZ::before { background-image: url('/images/altered/YZ.png'); }