/*
	Noir : #14140F
	Dorée : #F1B400
	Rouge : #FE3900
	Blanc : #FFFDF8

*/
:root { 
	--vh: 1vh;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  body { }
}
body{
	background-color: #14140F;
	padding: 0;
	margin: 0;
	font-family:"Inter",Roboto;
	font-size: 16px;
	overflow: hidden;
}

p{
	padding: 0;
	margin: 0;
}
a{
	text-decoration: none;
}

#bloc_page
{
	/*display: flex;
	justify-content: center;
	align-items: center;*/
	overflow: hidden;
	/*margin-top: 75px;
	margin-bottom: 60px;*/
}

#contenu
{
	height: 100dvh;
	width: 100%;
	
	position: absolute;
	z-index: 0;
	
	overflow: scroll;
	scrollbar-width: none;       /* Firefox */
  	-ms-overflow-style: none;
}

/*Template blocs*/
	/*carroussel*/
		.carroussel{
			width: 85%;
			height: 100px;

			position: relative;
			margin-left: 7.5%;

			display: flex;
			justify-content: center;
			align-items: center;
			color: #F1B400;
			font-size: 32px;
			font-weight: bold;
		}
		.carroussel__btn{
			width: 64.5px;
			height: 100px;

			position: absolute;


			border-radius: 3px;
			background-color: #4C4C4C;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;

			transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
		}
		.carroussel__btn span{
			width: 40px;
			height: 10px;

			border-radius: 10px;
			background-color: #F1B400;
		}
		.carroussel__btn p:nth-child(3){ /*on réduit la taille du mois*/
			font-size: 24px;
		}
		.carroussel__btn p:nth-child(4){ /*on cache l'année*/
			display: none;
		}
		.carroussel__btn:nth-child(1){
			transform: translatex(-150px) scale(0.01);
			opacity: 0;
		}
		.carroussel__btn:nth-child(2){
			transform: translatex(-125px) scale(0.6);
			
			filter: blur(2px);
			box-shadow: 2px 4.5px 2px #000;
		}
		.carroussel__btn:nth-child(3){
			transform: translatex(-70px) scale(0.8) ;

			filter: blur(1px);
			box-shadow: 4px 6px 4px #000;
		}
		.carroussel__btn:nth-child(4){
			color: #FFFDF8;
			box-shadow: 6px 9px 6px #000;
		}
		.carroussel__btn:nth-child(4) span{
			background-color: #FFFDF8;
		}
		.carroussel__btn:nth-child(5){
			transform: translatex(70px) scale(0.8);
			
			filter: blur(1px);
			box-shadow: 4px 6px 4px #000;
		}
		.carroussel__btn:nth-child(6){
			transform: translatex(125px) scale(0.6);

			filter: blur(2px);
			box-shadow: 2px 4.5px 2px #000;
		}
		.carroussel__btn:nth-child(7){
			transform:  translatex(150px) scale(0.01);
			opacity: 0;
		}
	/*carroussel*/

	/*Cartes*/

		.carteXL{
			width: 90vw;
			height: calc(90vw * 1.55);
			min-height: calc(90vw * 1.55);			
			margin-left: 5%;

			border-radius: calc(90vw * 1.55 * 0.025);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}

		.carteL{
			width: 270px;
			height: 420px;
			flex-shrink: 0;

			position: relative;
			margin: 10px 15px;
			/*margin-left: calc(50vw - 135px); /*centré !*/

			border-radius: 11px;
			box-shadow: 6px 9px 6px #000;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			transition: transform 0.15s ease, box-shadow 0.15s ease;
		}
			.carteL:hover{
				/*transform: translateY(-20px);*/
				box-shadow: 9px 18px 9px #000;
			}
			.carteL:active{
				/*transform: translateY(-20px);*/
				box-shadow: 9px 18px 9px #000;
			}
		.carteM{
			width: 180px;
			height: 280px;
			flex-shrink: 0;

			position: relative;
			margin: 20px 10px;

			border-radius:7px;
			box-shadow: 4px 6px 4px #000;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			transition: transform 0.3s ease, box-shadow 0.3s ease;	
		}
			.carteM:hover{
				transform: translateY(-10px);
				box-shadow: 6px 12px 6px #000;
			}
			.carteM:active{
				transform: translateY(-10px);
				box-shadow: 6px 12px 6px #000;
			}
		.carteS{
			width: 120px;
			height: 185px;
			flex-shrink: 0;

			position: relative;
			margin: 10px 5px;

			border-radius:4.5px;
			box-shadow: 2px 4.5px 2px #000;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			transition: transform 0.3s ease, box-shadow 0.3s ease;			
		}
			.carteS:hover{
				transform: translateY(-5px);
				box-shadow: 3px 9px 3px #000;
			}
			.carteS:active{
				transform: translateY(-5px);
				box-shadow: 3px 9px 3px #000;
			}
		.carteXS{
			width: 60px;
			height: 93px;
			margin: 10px 5px;

			border-radius:3px;
			box-shadow: 1px 3px 1px #000;

		}

		.carteFantome{
			height: 50px;

			background: #14140FFF;
			box-shadow: none;

			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.carteFantome p{
			color: #FFFDF8;
			font-size: 32px;
			font-weight: bold;
		}
	/*Cartes*/

	/*CarteMatch*/
		.ligueMatch{
			margin-top: 20px;
		}
		.ligueMatch__titre{
			display: flex;
			align-items: center;
		}
		.ligueMatch__titre img{
			height: 30px;
			width: auto;

			margin: 0px 15px;

			border-radius: 1px;
		}
		.ligueMatch__titre p{
			color:#FFFDF8;
			font-weight: bold;
		}
		#listeMatchs{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			overflow: scroll;
			scrollbar-width: none;       /* Firefox */
  			-ms-overflow-style: none;
		}
		.ligneMatchs{
			width: 100%;

			display: flex;
			justify-content: space-around;
			align-items: center;
			overflow: scroll;
			scrollbar-width: none;       /* Firefox */
  			-ms-overflow-style: none;
		}
		.ligneMatchs .carteL{
			margin-left: 10px;
		}
		.ligneMatchs .carteM{
			margin-left: 25px;
		}
		.ligneMatchs .carteS{
			margin-left: 15px;
		}
		.ligneMatchs .carteL:nth-child(1){
			margin-left: calc(50% - 135px);
		}
		.ligneMatchs .carteL:nth-last-child(1){
			margin-right: calc(50% - 135px);
		}
		.ligneMatchs .carteM:nth-child(1){
			margin-left: calc(50% - 90px);
		}
		.ligneMatchs .carteM:nth-last-child(1){
			margin-right: calc(50% - 90px);
		}
		.ligneMatchs .carteS:nth-last-child(1){
			margin-right: calc(50% - 60px);
		}

		.carteMatch{
			justify-content: space-around;
			box-sizing: border-box;
		}
		.carteMatch--commun{
			background: linear-gradient(to bottom right,rgb(87, 96, 111),rgb(47, 54, 64));border:solid; border-width:3px;border-color:rgb(45, 52, 54);
		}
		.carteMatch--rare{
			background: linear-gradient(to bottom right, rgba(0,0,0,1) 20%, rgba(116, 125, 140,1.0) 50%, rgba(0,0,0,1) 80%);border:inset; border-width:3px; border-color: rgb(178, 190, 195);
		}
		.carteMatch--affiche{
			background: linear-gradient(to bottom right, rgba(245,205,121,1) 40%, rgba(241,180,0,1) 60%);border:inset; border-width:5px; border-color: #ED4C67 #B53471 #833471 #B53471;
		}
		.carteMatch--sommet {
		  background:
		    radial-gradient(800px 250px at 20% 15%, rgba(255,255,255,0.06), transparent 8%),
		    linear-gradient(180deg, #2a0a05 0%, #ff1f1f 45%, #ff5a1a 100%);
		  border-radius: 16px;
		  position: relative;
		  overflow: hidden; 
		}
			.carteMatch--sommet::before{
			  content: "";
			  position: absolute;
			  inset: 0;
			  background-image:
			    repeating-radial-gradient(circle at 10% 20%, rgba(255,255,200,0.0) 0 1px, rgba(255,255,200,0.06) 2px 3px),
			    repeating-radial-gradient(circle at 70% 40%, rgba(255,200,120,0.0) 0 1px, rgba(255,200,120,0.07) 2px 4px);
			  mix-blend-mode: screen;
			  opacity: 0.95;
			  background-size: 300% 300%;
			  animation: emberParticles 300s linear infinite;
			  pointer-events: none;
			}
			@keyframes emberParticles {
			  0% { background-position: 0% 0%; }
			  50% { background-position: 50% 50%; }
			  100% { background-position: 0% 100%; }
			}
			.carteMatch--sommet::after{
			  content: "";
			  position: absolute;
			  inset: 0;
			  background: radial-gradient(circle at 50% 80%,  rgba(255,120,40,0.12), transparent 35%);
			  pointer-events: none;
			  opacity: 0.95;
			}
		.carteMatch--cache{ 
			background: linear-gradient(to bottom right, rgba(127,140,141,1) 0%, rgba(189,195,199,1) 100%);border:inset; border-width:2px;border-color:white;
		}
		.carteMatch--annule{
			background-color: #C1BDB3;
		}
		.carteMatch__date{
			display: none;
		}
		.carteMatch__champ{
			height: 40px;
			width: auto;

			margin-top: 20px;

			border-radius: 2px;
		}
		.carteMatch__heure{
			font-weight: bolder;
			color: #14140F;
			text-shadow: 0.7px 0.7px 0px #FFFDF8, -0.7px -0.7px 0px #FFFDF8,-0.7px 0.7px 0px #FFFDF8, 0.7px -0.7px 0px #FFFDF8;
		}

		/*match*/
			.carteMatch__Match{
				width: 92%;

				margin-top:-10px;

				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.carteMatch__Match__equipe
			{
				width: 98%;
				height: 70px;
				background: white;
				background-size: cover;
				background-position: center center;
				border-radius: 10px;
				display: flex;
				justify-content: center;
			}
			.carteMatch__Match__equipe--l{
				clip-path: polygon(0 0, 100% 0, 100%  -5px, calc(5px) 100%, 0 100%);
				transform: translate(3px, 33px);
				/*box-shadow: 2px 2px 2px #000 inset;*/
			}
			.carteMatch__Match__equipe--v{
				clip-path: polygon(100% 100%, 0 100%, 0 calc(100% + 5px), calc(100% - 5px) 0, 100% 0);
				transform: translate(-3px, -33px);
				align-items: end;
				/*box-shadow: -2px -2px 2px #000 inset;				*/
			}
			.carteMatch__Match__equipe--v p{
				text-align: right;
			}
			.carteMatch__Match__equipe p{
				width: 100%;
				
				margin: 5px 15px;
				
				color: #FFFDF8;
				font-weight: bold;
				text-shadow: 1px 1px 0px #14140F, -1px -1px 0px #14140F,-1px 1px 0px #14140F, 1px -1px 0px #14140F;
			}
			.carteMatch__Match--divider
			{
				text-align: center;
			}
			.carteMatch__Match--visit
			{
				text-align: right;
			}
		/*match*/
			.carteMatch__stat{
				margin-top: -20px;
				margin-bottom: 20px;

				font-size: 0.8em;
				color: #FFFDF8;
				text-shadow: 0.5px 0.5px 0px #14140F, -0.5px -0.5px 0px #14140F,-0.5px 0.5px 0px #14140F, 0.5px -0.5px 0px #14140F;
			}

		/*scores*/
			.carteMatch__scores{
				width: 60%;

				margin-top:-10px;

				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.carteMatch__scores span{
				width: 30px;
				height: 10px;
				border-radius: 10px;
				background-color: #14140F;
			}
			.carteMatch__scores__but{
				height: 46.5px;
				width: 30px;
				border-radius: 3px;

				display: flex;
				justify-content: center;
				align-items: center;

				font-size: 24px;
				font-weight: bold;
			}
				.carteMatch__scores__but--gagnant{
					background-color:green;
				}
				.carteMatch__scores__but--perdant{
					background-color:red;
				}
				.carteMatch__scores__but--present{
					background-color:beige;
				}
				.carteMatch__scores__but--nul{
					background-color:blue;
				}
		/*scores*/
		/*cotes*/
			.carteMatch__cotes{
				width: 100%;
				flex:1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				overflow: scroll;
				scrollbar-width: none;       /* Firefox */
  				-ms-overflow-style: none;
			}
			.carteMatch__cotes__ligne{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.carteMatch__cotes__ligne h1{
				margin: 0;
				margin-top: 20px;

				font-size: 1.2em;
				color: #FFFDF8;
				text-shadow: 0.7px 0.7px 0px #14140F, -0.7px -0.7px 0px #14140F,-0.7px 0.7px 0px #14140F, 0.7px -0.5px 0px #14140F;
			}
			.carteMatch__cotes__bulle{
				width: 25%;

				margin: 2%;

				display: flex;
				flex-direction: column;
				align-items: center;
				font-weight: 1000;
			}
			.carteMatch__cotes__bulle--hor
			{
				width: 45%;

				flex-direction: row;
				justify-content: space-around;
			}
			.carteMatch__cotes__btn{
				height: 40px;
				width: 100%;

				margin-bottom: 5px;
				
				border-radius: 7.5px;
				border: solid 2px;
				cursor: pointer;
				background-color: #14140F;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #F1B400;
			}
			.carteMatch__cotes__bulle--hor .carteMatch__cotes__btn{
				width: 30%;
			}
			.carteMatch__cotes__btn--slct{
				background-color: red;
				cursor: auto;
				color:#14140F;
				border-color: #14140F;
			}
			.carteMatch__cotes__btn--gagnant{
				background-color: green;
				cursor: auto;
				color:#14140F;
				border: none;
			}
			.carteMatch__cotes__btn--perdant{
				background-color: red;
				cursor: auto;
				color:#14140F;
				border: none;
			}
			.carteMatch__cotes__btn--present{
				background-color: beige;
				cursor: auto;
				color:#14140F;
				border: none;
			}
			.carteMatch__Match__pari{
				color:#FFFDF8;
				text-shadow: 0.7px 0.7px 0px #14140F, -0.7px -0.7px 0px #14140F,-0.7px 0.7px 0px #14140F, 0.7px -0.5px 0px #14140F;
			}
		/*cotes*/
		/*btn*/
			.carteMatch__btn
			{
				width: 80%;
				height: 10%;
				
				margin-bottom: 5%;

				border-radius: 7.5px;
				background-color: #14140F;
				border:solid 2px #F1B400;

				display: flex;
				justify-content: center;
				align-items: center;
				color: #F1B400;
				font-weight: bold ;
			}
		/*btn*/
		/*admin*/
			.carteMatch__admin{
				width: 80%;
				display: flex;
				justify-content: space-around;
				margin: 15px 10%;
			}
			.carteMatch__admin a{
				width: 30px;
				font-size: 0.5em;
			}
		/*admin*/
	/*CarteMatch*/

	/*CarteJoueur*/
		.listeJoueurs{
			width: 98%;

			margin-left: 1%;

			display: flex;
			flex-wrap: wrap;
			justify-content:space-around;
			align-items: center;			
		}
		.ligneJoueurs{
			width: 100%;

			display: flex;
			flex-wrap: wrap;
			justify-content:space-around;
			align-items: center;
		}
		.ligneJoueurs .carteL{
			margin: 30px 0px;
		}

		.cartejoueur{}

		/*Position*/
			.carteJoueur__pos{
				position: absolute;

				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;

				color:#14140F;
			}
			.carteL .carteJoueur__pos{
				width: 40px;
				height: 40px;

				position: absolute;
				left: -10px;
				top:-20px;

				border-radius: 40px;
				box-shadow: 0px 0px 1px 3px #0000002A inset, 0px 1px 1px 2px #000A;
				font-size: 24px;			
			}
			.carteM .carteJoueur__pos{
				width: 30px;
				height: 30px;

				left: -7.5px;
				top:-15px;

				border-radius: 30px;	
				box-shadow: 0px 0px 0.66px 2px #0000002A inset, 0px 1px 1px 2px #000A;		
			}
			.carteS .carteJoueur__pos{
				width: 20px;
				height: 20px;

				left: -5px;
				top:-10px;

				border-radius: 20px;

				font-size: 12px;
				background-color: beige;
				box-shadow: 0px 0px 0.5px 1.5px #0000002A inset, 0px 1px 1px 2px #000A;	
			}
			.carteJoueur .pos1{
				background-color: gold;
			}
			.carteJoueur .pos2{
				background-color: silver;
			}	
			.carteJoueur .pos3{
				background-color: brown;
			}		
		/*position*/
		/*pp*/
			.carteJoueur__pp
			{
				margin-top: 10%;

				border-radius: 100%;
				overflow: hidden;
			}
			.carteJoueur__pp a{
				display: inline-block;
				width: 104%;
				height: 104%;
				transform: translate(-2%,-2%);
			}
			.carteXL .carteJoueur__pp{
				width: 75px;
				height: 75px;

				border: solid 3px #F1B400;
			}
			.carteL .carteJoueur__pp{
				width: 60px;
				height: 60px;

				border: solid 3px #F1B400;
			}
			.carteM .carteJoueur__pp{
				width: 40px;
				height: 40px;

				border: solid 2px #F1B400;
			}
			.carteS .carteJoueur__pp{
				width: 25px;
				height: 25px;

				border: solid 1px #F1B400;
			}
		/*pp*/
		/*pseudo*/
			.carteJoueur__pseudo
			{
				margin-top: -33%;
				
			}
			.carteJoueur__pseudo a
			{
				color: #14140F;
				font-weight: bold;
				/*-webkit-text-stroke: 1px #F1B400;*/
				text-shadow: 0.7px 0.7px 0px #F1B400, -0.7px -0.7px 0px #F1B400,-0.7px 0.7px 0px #F1B400, 0.7px -0.7px 0px #F1B400;
			}
			.carteJoueur__pseudo a:hover
			{
				color: #F1B400;
				text-shadow: 0.7px 0.7px 0px #14140F, -0.7px -0.7px 0px #14140F,-0.7px 0.7px 0px #14140F, 0.7px -0.7px 0px #14140F;
				
			}
			.carteXL .carteJoueur__pseudo {
				font-size: clamp(36px, 5vw, 44px);
				margin: 0;
			}
			.carteL .carteJoueur__pseudo {
				/*font-size: 32px;*/
				font-size: clamp(24px, 5vw, 32px);
			}
			.carteM .carteJoueur__pseudo {
				/*font-size: 24px;*/
				font-size: clamp(16px, 5vw, 24px);
			}
			.carteS .carteJoueur__pseudo {
				/*font-size: 16px;*/
				font-size: clamp(8px, 5vw, 12px);
			}
		/*pseudo*/
		/*Bk*/
			.carteJoueur__bk
			{
				color: #FFFDF8;
				font-weight: bold;
				/*-webkit-text-stroke: 1px #14140F;*/
				text-shadow: 0.7px 0.7px 0px #14140F, -0.7px -0.7px 0px #14140F, -0.7px 0.7px 0px #14140F, 0.7px -0.7px 0px #14140F;				
			}
			.carteXL .carteJoueur__bk {
				font-size: 44px;
				margin-bottom: 66%;
			}
			.carteL .carteJoueur__bk {
				font-size: 32px;
			}
			.carteM .carteJoueur__bk {
				font-size: 24px;
			}
			.carteS .carteJoueur__bk {
				
				font-size: 16px;
			}
		/*Bk*/
		/*btn*/
			.carteJoueur__btn
			{
				width: 80%;
				height: 10%;
				
				margin-bottom: 10%;

				background-color: #14140F;
				border:solid 2px #F1B400;

				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				
			}
			.carteJoueur__btn a{
				color: #F1B400;

			}
			.carteL .carteJoueur__btn {
				border-radius: 12.5px;
				font-size: 24px;

			}
			.carteM .carteJoueur__btn {
				border-radius: 10px;
			}
			.carteS .carteJoueur__btn {
				border-radius: 7.5px;
				font-size: 12px;
			}
		/*btn*/
	/*CarteJoueur*/

	/*CartePari*/
		.cartePari
		{
			width: 250px;
			height: 80px;
			flex-shrink: 0;

			margin: 5px 0px;

			background-color: #CBC0AD;
			border-radius:10px;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
		.cartePari--gagnant
		{
			background-color: #29BF12;
		}
		.cartePari--perdant
		{
			background-color: #DF3200;
		}
		.cartePari--present
		{
			background-color: #CBC0AD;
		}
		.cartePari--annule
		{
			background-color: #A9A69D;
		}
		.cartePari p
		{
			width: 100%;

			text-align: center;
			font-weight: bold;
			text-wrap: nowrap;
			overflow: auto;
			scrollbar-width: none;       /* Firefox */
  			-ms-overflow-style: none;
		}
		.cartePari__match
		{
			height: 20px;

			border-radius: 7.5px 7.5px 0 0;
			background-color: #14140F;
			
			color: #FFFDF8;
		}
		.cartePari__pari
		{
			height: 40px;

			display: flex;
			align-items: center;
			justify-content: center;

			color:#14140F;
		}
		.cartePari__cote
		{
			height: 20px;

			border-radius:  0 0 7.5px 7.5px;
			background-color: #14140F;

			color: #FFFDF8;
		}
	/*CartePari*/

	/*CarteTicket*/
		.ligneJoueur{
			margin-top: 10px;
		}
		.ligneJoueur__titre{
			display: flex;
			align-items: center;
		}
		.ligneJoueur__titre img{
			height: 30px;
			width: auto;

			margin: 0px 15px;

			border-radius: 1px;
		}
		.ligneJoueur__titre p{
			color:#FFFDF8;
			text-shadow: 0.7px 0.7px 0px #F1B400 -0.7px -0.7px 0px #F1B400-0.7px 0.7px 0px #F1B400 0.7px -0.7px 0px #F1B400;
			font-weight: bold;
		}
		.ligneTickets{
			width: 100%;

			display: flex;
			justify-content: space-around;
			align-items: center;
			overflow: scroll;
			scrollbar-width: none;       /* Firefox */
  			-ms-overflow-style: none;
		}
		.ligneTickets .carteL{
			margin-left: 10px;
		}
		.ligneTickets .carteM{
			margin-left: 25px;
		}
		.ligneTickets .carteS{
			margin-left: 15px;
		}
		.ligneTickets .carteL:nth-child(1){
			margin-left: calc(50% - 135px);
		}
		.ligneTickets .carteL:nth-last-child(1){
			margin-right: calc(50% - 135px);
		}
		.ligneTickets .carteM:nth-child(1){
			margin-left: calc(50% - 90px);
		}
		.ligneTickets .carteM:nth-last-child(1){
			margin-right: calc(50% - 90px);
		}
		.ligneTickets .carteS:nth-last-child(1){
			margin-right: calc(50% - 60px);
		}
		.listeTickets
		{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			overflow: scroll;
			scrollbar-width: none;       /* Firefox */
  			-ms-overflow-style: none;
		}
		.listeTicketsPerso
		{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			overflow: scroll;
			scrollbar-width: none;       /* Firefox */
  			-ms-overflow-style: none;
		}
		.listeTicketsPerso .blocInfo{
			display: none;
		}
		.listeTicketsPerso .ligneJoueur__titre{
			display: none;
		}
		.carteTicket{
			position: relative;
		}
		.carteTicket--gagnant
		{
			background-color: #4CD137;
		}
		.carteTicket--perdant
		{
			background-color: #FE3900;
		}
		.carteTicket--present
		{
			background-color: #E8DBC5;
		}
		.carteTicket--annule
		{
			background-color: #C1BDB3;
		}
		/*carteTicket header*/
			.carteTicket__header
			{
				width: 100%;
				height: 50px;

				position: absolute;
				top:0px;
				left: 0;
				z-index: 1;

				border-radius: 15px;

				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.carteXL .carteTicket__header{
				height: 75px;
			}
			.carteTicket--gagnant .carteTicket__header
			{
				background: linear-gradient(0deg,#4CD1371A 0%, #4CD137FF 90%);
			}
			.carteTicket--perdant .carteTicket__header
			{
				background: linear-gradient(0deg,#FE39001A 0%, #FE3900FF 90%);
			}
			.carteTicket--present .carteTicket__header
			{
				background: linear-gradient(0deg,#E8DBC51A 0%, #E8DBC5FF 90%);
			}
			.carteTicket--annule .carteTicket__header
			{
				background: linear-gradient(0deg,#C1BDB31A 0%, #C1BDB3FF 90%);
			}
			.carteTicket__header p 
			{
				font-size: 12px;
				color: #FFFDF8;
				font-weight: bold;
				text-shadow: 0.7px 0.7px 0px #14140F, -0.7px -0.7px 0px #14140F,-0.7px 0.7px 0px #14140F, 0.7px -0.7px 0px #14140F;
				text-align: center;
			}
			.carteXL .carteTicket__header p{
				font-size: 18px;
			}
			.carteTicket__header a 
			{
				font-size: 12px;
				color: #F1B400;
				font-weight: bold;
				text-shadow: 0.7px 0.7px 0px #14140F, -0.7px -0.7px 0px #14140F,-0.7px 0.7px 0px #14140F, 0.7px -0.7px 0px #14140F;
			}
			.carteXL .carteTicket__header a{
				font-size: 18px;
			}
			.carteTicket__header__id{
				width: calc(100% * 2 / 5);
				text-align: center;
			}	

			.carteTicket__header__pp{
				display: inline-block;
				width: 40px;
				height: 40px;

				border-radius: 40px;
				border:solid 1px #F1B400;
			}
			.carteXL .carteTicket__header__pp{
				width: 60px;
				height: 60px;
			}
			.carteTicket__header__date
			{
				width: calc(100% * 2 / 5);
				
			}
		/*carteTicket header*/

		/*carteTicket list*/
			.carteTicket__list{
				height: 62%; /*à height:100% ça dépassait en bas...*/
				position: relative;
				z-index: 0;
				top: 2px; /*à top:0 les coins des cartes paris dépassaient en haut...*/

				padding-top: 50px;
				scroll-padding-top: 50px;
				padding-bottom: 100px;
				scroll-padding-bottom: 100px;

				display: flex;
				flex-direction: column;
				align-items: center;
				overflow-y: auto;
				scrollbar-width: none;       /* Firefox */
	  			-ms-overflow-style: none;
			}
			.carteTicket__list::-webkit-scrollbar {
				display: none;               /* Chrome, Safari, Edge */
			}
			.carteXL .carteTicket__list{
				padding-top: 75px;
				scroll-padding-top: 75px;
				height: 70%;
				padding-bottom: 140px;
				scroll-padding-bottom: 140px;
			}
			.carteTicket__list .cartePari
			{
				position: relative;
				margin-top: 5px;
				margin-bottom: 2.5px;
			}
			.carteXL .cartePari{
				width: 320px;
				height: 90px;
			}
			.carteTicket__list .carteParis .carteParis__match
			{

			}
		/*carteTicket list*/

		.carteTicket__divider
		{
			height: 5px;
			width: 95%;

			position: absolute;
			bottom: calc(20% - 5px); /*taille du footer moins la moitié de la hauteur du diviseur*/
			z-index: 99;
			border-radius: 10px;

			background-color: #14140F;
		}

		/*carteTicket footer*/
			.carteTicket__footer{			
				width: 100%;
				height: 20%;

				position: absolute;
				bottom: 0;
				left: 0;

				border-radius: 15px;
				
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}
			.carteTicket--gagnant .carteTicket__footer{
				background: linear-gradient(180deg,#4CD1371A 0%, #4CD137FF 90%);
			}
			.carteTicket--perdant .carteTicket__footer{
				background: linear-gradient(180deg,#FE39001A 0%, #FE3900FF 90%);
			}
			.carteTicket--present .carteTicket__footer{
				background: linear-gradient(180deg,#E8DBC51A 0%, #E8DBC5FF 90%);
			}
			.carteTicket--annule .carteTicket__footer{
				background: linear-gradient(180deg,#C1BDB31A 0%, #C1BDB3FF 90%);
			}

			.carteTicket__footer__bulle{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 30%;
				margin: 0 2%;
			}
			.carteTicket__footer__value{
				display: flex;
				flex-direction: column;
				align-items: center;

				color: #FFFDF8;

				height: 45px;
				width: 100%;
				border-radius: 10px;

				background-color: #14140F;
				display: flex;
				justify-content: center;
				align-items: center;

				font-weight: 1000;
			}
			.carteTicket__footer__label{
				color: #14140F;
			}
			.carteTicket__footer__bulle--gain{
				width: 40%;
			}
		/*carteTicket footer*/
	/*CarteTicket*/

	/*Autres*/
		.bouton{
			width: 50%;
			height: 30px;
			flex-shrink: 0;

			background-color: #14140F;
			border-radius: 10px;
			border:solid 2px #F1B400;

			display: flex;
			justify-content: center;
			align-items: center;
			color:#F1B400;
			text-decoration: none;
			cursor: pointer;
		}
		.bouton:disabled{
			background-color: darkgrey;
			color: grey;
			border:solid 2px grey;
		}
		.bouton--seul{
			margin-left: 25%;
		}
		.bouton--rouge{
			background-color: #FE3400;
			color: #14140F;
			border: none;

		}
		.blocInfo{
			width: 80%;
			height: 100px;

			margin: 10%;
			position: relative;

			border-radius: 10px;
			background-color: grey;

			display: flex;
			align-items: left;
			justify-content: flex-start;
			color:#14140F;
		}
		.blocInfo p
		{
			width: 90%;
			height: 90%;
			margin: 5% 5%;
		}
		.blocInfo a{
			position: absolute;
			bottom: -15px;
			right: 5%;
			transform: scale(0.8);
		}
		.bloctest {
			color: white;
			font-size: 16px;
			font-weight: bold;
		}
		.lilForm{
			height: 100px;
			width: 90vw;

			margin: 0 5vw;

			border-radius: calc(90vw * 1.55 * 0.025);
			background-color: #CBC0AD;
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
		.lilForm .bouton{
			width: 40%;

			position: absolute;
			left: 30%;
			bottom:-15px;
		}

		.tix{
			margin-top: 20px;
			width: 10px;
			height: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
		}
		.tix span{
			background-color: white;
			border-radius: 5px;
		}
		.tix span:nth-child(1){
			height: 10%;
			width: 60%;
			position: absolute;
			top:0;
			
		}
		.tix span:nth-child(2){
			height: 10%;
			width: 100%;
			transform: rotate(90deg);
			position: absolute;
			top:50%;
		}
		.tix span:nth-child(3){
			height: 10%;
			width: 40%;
			position: absolute;
			top:50%;
			
		}
	/*Autres*/	
/*Template blocs*/

/*template*/
	/*Burger*/
		.menu {
			width: 100%;
			height: 100dvh;

			position: fixed;
			top: 0;
			right: -100%; /* caché à droite */
			z-index: 999;
			
			background: #14140FAA;
			transition: right 0.3s ease;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.menu.active {
			right: 0;
		}
		#menu__burger{
			height: 50px;
			width: 30%; /*la même taille que le burger*/

			position: absolute;
			right: 0;
			top:40px;

			background-color: #404040FF;
			border-radius: 10px 0px 0px 10px;

			cursor: pointer;
			color: #F1B400;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		#menu__burger span{ /*ils servent à créer une croix*/
			height: 10px;
			width: 40px;
			background: #F1B400;
			border-radius: 10px;
		}
		#menu__burger span:nth-child(1) {
		  transform: rotate(45deg) translate(7px, 0);
		}
		#menu__burger span:nth-child(2) {
		  transform: rotate(-45deg) translate(7px, 0);
		}

		#menu__pp{
			display: inline-block;
			width: 100px;
			height: 100px;
			flex-shrink: 0; 
			
			margin-top: 25%;
			margin-bottom: 25px;

			border-radius: 100px;
			border: solid 3px #F1B400;
		}

		.menu p{
			margin-bottom: 75px;

			color: #FFFDF8;
			font-size: 48px;
			font-weight: 1000;
		}

		#menu__btnConnexion{
			width: 70%;
			height: 75px;

			margin-top: 50%;
			margin-bottom: 50px;

			border-radius: 5px;
			background-color: #F1B400;
			border: solid 2px #14140F;
			box-shadow: 2px 2px 2px #000;
			

			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}
		#menu__btnConnexion:active{
			box-shadow: none;
		}

		#menu__btnConnexion p{
			font-size: 24px;
			margin: 0;
			width: 90%;
			color: #14140F;
		}

		#menu__btnConnexion p:nth-child(1){
			text-align: left;
		}
		#menu__btnConnexion p:nth-child(2){
			text-align: right;
		}

		.menu ul {
			list-style: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0;
			flex: 1;
		}

		.menu li {
			margin-bottom: 20px;
			
		}

		.menu a {
			font-size: 32px;
			text-align: center;
			font-weight: bold;
			color: #F1B400;
		}

		.menu a:hover {
			text-decoration: underline;
		}
		#bouton--deconnexion{
			height: 50px;
			margin-bottom: 40%;

			background-color: #FE3900;
			color: #14140F;
			font-size: 24px;
			border-color: #14140F;
		}
	/*Burger*/

	/*header*/
		#header
		{
			height: 50px;
			width: 100vw;
			position: absolute;
			top:40px;
			display: flex;
			justify-content: space-between;
			z-index: 1;
		}
		#header__left
		{
			height: 100%;
			width: 60%;
		}
		#header__left__cd
		{
			height: 100%;
			width: 100%;
			/*background-color: #404040AA;*/
			background: linear-gradient(135deg,rgba(220, 221, 225, 0.4) 10%, rgba(245, 246, 250, 0.15) 30%, rgba(220, 221, 225, 0.25) 50%, rgba(245, 246, 250, 0.2) 70%, rgba(220, 221, 225, 0.3) 90%);
			border-radius: 0px 10px 10px 0px;
			box-shadow: 1px 1px #FFFDF855, -1px -1px #FFFDF855,-1px 1px #FFFDF855, 1px -1px #FFFDF855;
			color: #FFFDF8;
			display: flex;
			align-items: center;
		}
		#header__left__cd p
		{
			margin-left: 10px;			
		}
		/*switch*/
			#switch{
				width: 60%;
				height: 50px;

				position: fixed;
				left: 0;
				top:40px;
				z-index: 99;

				background: linear-gradient(135deg,rgba(220, 221, 225, 0.4) 10%, rgba(245, 246, 250, 0.15) 30%, rgba(220, 221, 225, 0.25) 50%, rgba(245, 246, 250, 0.2) 70%, rgba(220, 221, 225, 0.3) 90%);
	    	border-radius: 0px 10px 10px 0px;
	    	box-shadow: 1px 1px #FFFDF855, -1px -1px #FFFDF855,-1px 1px #FFFDF855, 1px -1px #FFFDF855;

				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
			#switch p
			{
				width: calc(50% - 40px);
				margin: 0px;
				text-align: center;
				font-size: 10px;
				font-weight: bold;
				color: #FFFDF8;
				flex-shrink: 0;
			}
			#switch_container
			{
				margin : 2px;
				height: 100%; 
			}
			#switch_button
			{
				width: 70px;
				height: 100%;

				border-radius: 25px;
				background: #14140FAA;
				cursor: pointer;
				
				display: flex;
				align-items: center;
				transition: all 0.2s ease-in-out;
			}
			#switch_button > #switch_button__circle
			{
				height: 40px;
				width: 40px;

				background-color: #F1B400;
				border-radius: 50%;
				transition: all 0.2s ease-in-out;
				margin-left: 5px;
			}
			#switch_button.active > #switch_button__circle
			{
				margin-left: 25px;
			}

			.passSwitch{
				display: none;
			}
		/*switch*/

		#header__burger
		{
			height: 100%;
			width: 30%;
			background: linear-gradient(135deg,rgba(220, 221, 225, 0.4) 10%, rgba(245, 246, 250, 0.15) 30%, rgba(220, 221, 225, 0.25) 50%, rgba(245, 246, 250, 0.2) 70%, rgba(220, 221, 225, 0.3) 90%);
			border-radius: 10px 0px 0px 10px;
			box-shadow: 1px 1px #FFFDF855, -1px -1px #FFFDF855,-1px 1px #FFFDF855, 1px -1px #FFFDF855;
			
			display: flex;
			justify-content: flex-end;
			align-items: center;

			cursor: pointer;
		}
		#header__burger__pp
		{
			width: 40px;
			height: 40px;
			border-radius: 100%;
			border: solid 2px #F1B400;
			margin-left: 5px;
		}

		#header__burger__bk
		{	
			width: 80%;
			color: #F1B400;
			margin-right: 5px;
			font-size: 22px;
			font-weight: bold;
		}

		#header__burger__queen{
			width: 10%;
			height: 80%;
			
			right: 0;

			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: end;
		}

		#header__burger__queen span{
			width: 15px;
			height: 5px;

			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			background-color: #F1B400;
		}

		#header__burger__king
		{
			width: 100%;
			height: 60%;

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}
		#header__burger__king span
		{
			width: 40%;
			height: 5px;
			background-color: #F1B400;
			border-radius: 10px;
		}
	/*header*/

	/*Panier*/
		#panier{
			height: 500px;
			width: 320px;

			background-color: #404040;
			border-radius: 12.5px;

	    position: fixed;
	    transition: transform 300ms cubic-bezier(.22,.9,.35,1);
	    left: calc((100vw - 320px)/2);
	    transform: translatey(calc(100dvh - 100px));
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: center;

  		touch-action: none;          /* empêche le navigateur d'interpréter le mouvement comme un scroll/zoom */
		  -webkit-user-select: none;   /* évite la sélection sur iOS/Safari pendant le drag */
		  user-select: none;           /* évite la sélection de texte pendant le drag */
		  overflow: hidden;
		}
		#panier.open {
		    box-shadow: 0 15px 30px 0 #000;
		    transform: translatey(calc(50dvh - 200px));
		}
		#panier.closed{
			transform: translatey(calc(100dvh - 100px));
		}
		#panier.hide-up {
			transform: translatey(-120%); /* disparaît en haut */
		}

		/*panier header*/

			#panier__header{
				width: 100%;
				height: 5%;
				position: absolute;
				top:10px;
				left: 0;
				z-index: 1;
				display: flex;
				justify-content: space-around;
			}
			#panier__header p {
				margin: 0px 10%;

				color: #FFFDF8;
				font-weight: bold;
			}
			#panier__header img {
				width: 13px;
				height: 13px;
			} 
			#panier__header__left{
				width: calc(100% * 2 / 5);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			#panier__header__left a{
				width: 70%;
				display: none;
				justify-content: space-around;
				align-items: center;
			}
			#panier__header__left a img{
				height: 20px;
				width: auto;
			}
			#panier__header__left a h1{
				font-size: 1.1em;
				color:#fe3900;
			}
			#panier.open #panier__header__left p{
			    display: none;
			}
			#panier.open #panier__header__left .hide{
			    display: none;
			}
			#panier.open #panier__header__left .show{
				display: flex;
			}
			#panier.closed #panier__header__left .show{
				display: none;
			}	
			#panier__header__barre{
				width: 64px; /*320 (la largeur du panier) /5*/
				height: 5px;

				border-radius: 5px;
				background: #F1B400;

				margin-top: 5px;
			}

			#panier__header__right{
				width: calc(100% * 2 / 5);
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			#panier__header__right__paris{
				display: flex;
				align-items: center;
			}
		/*panier header*/

		/*panier list*/
			#panier__list{
				width: 288px;
				height: 455px;

				position: relative;
				z-index: 0;
				top: 40px;

				padding-bottom: 150px;
				scroll-padding-bottom: 150px;

				display: flex;
				flex-direction: column;
				align-items: center;
				overflow-y: auto;
				scrollbar-width: none;       /* Firefox */
	  			-ms-overflow-style: none;
			}
			#panier__list::-webkit-scrollbar {
				display: none;               /* Chrome, Safari, Edge */
			}
			#panier__list .cartePari{
				position: relative;
				margin-top: 10px;
				margin-bottom: 5px;
			}
			.panier__pari__btn{
				width: 20px;
				height: 20px;

				position: absolute;
				right: -10px;
				top:-10px;

				background-color: #14140F;
				border-radius: 5px;
				border: solid	2px #F1B400;
				cursor: pointer;

				display: flex;
				justify-content: center;
				align-items: center;
			}
			.panier__pari__btn p{
				width: 10px;
				height: 2px;
				background-color: #F1B400;
			}
		/*panier list*/

		#panier__divider{
			height: 5px;
			width: 95%;

			position: absolute;
			bottom: calc(20% - 5px); /*taille du footer moins la moitié de la hauteur du diviseur*/
			z-index: 99;
			border-radius: 10px;

			background-color: #14140F;
		}

		/*panier footer*/
			#panier__footer{			
				width: 100%;
				height: 20%;

				position: absolute;
				bottom: 0;
				left: 0;

				border-radius: 15px;
				background-color: #404040AA;
				background: linear-gradient(180deg,#40404055 0%, #404040FF 90%);

				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.panier__footer__bulle{
				display: flex;
				flex-direction: column;
				align-items: center;

				color: #FFFDF8;
			}
			.panier__footer__value {
				height: 45px;
				width: 70px;
				border-radius: 10px;

				background-color: #14140F;
				display: flex;
				justify-content: center;
				align-items: center;

				font-weight: 1000;
			}
			#panier__footer__valider{
				cursor: pointer;
			}
			#panier__footer__valider img{
				height: 60px;
				width: auto;
			}
			#panier__footer__valider.disabledValider{
				cursor: auto;
				filter: grayscale(1);
			}
			#panier__footer__mise__value{
				border: solid 2px #F1B400;
				color: #F1B400;
				cursor: pointer;

				position: relative;
				z-index: 1002;
			}
			#panier__footer__mise__option {
				position: absolute;
				flex-direction: column;
				justify-content: space-between;
				z-index: 1000;

				/*display: none;*/
			}

			#panier__footer__mise__option .panier__footer__value {
				margin-bottom: 5px;

				border: solid 2px #F1B400;
				color: #F1B400;
				cursor: pointer;

				position: relative;
			}
			#panier__footer__mise__option .panier__footer__value:nth-child(1){
				transition: transform 0.6s ease;
			}
			#panier__footer__mise__option .panier__footer__value:nth-child(2){
				top: -54px; /*aucune idée de pourquoi cette valeur, mais c'est celle qui permet de cacher le bloc derrière...*/
				transition: transform 0.3s ease;
			}
			#panier__footer__mise__option .extended:nth-child(1){
				transform: translateY(-120px);
			}
			#panier__footer__mise__option .extended:nth-child(2){
				transform: translateY(-60px);
			}
			#panier__footer__mise.extended #panier__footer__mise__option {
				display: flex;
			}
			#panier__footer__mise.extended{
				background-color: red;
			}
		/*panier footer*/
		/*blocInfo--panier*/
		#blocInfo--panier{
			position: absolute;
			top:calc(50% - 50px);
			border: solid 1px red;

			display: none;
		}
		#blocInfo--panier a{
			width: 30px;
			height: 30px;

			position: relative;
			right:-10px;
			top:-17px;

			background-color: red;
			border-radius: 5px;

			display: flex;
			align-items: center;
			justify-content: center;
		}
		#blocInfo--panier a span{
			height: 20px;
			width: 4px;
			background-color: #14140F;
			display: inline-block;
		}
		#blocInfo--panier a span:nth-child(1){
			transform: rotate(-45deg) translate(1px, 2px);
		}
		#blocInfo--panier a span:nth-child(2){
			transform: rotate(45deg) translate(-1px, 2px);
		}
		/*blocinfo--panier*/
	/*Panier*/

	/*footer*/
		#footer{
			height: 50px;
			width: 100vw;
			background: linear-gradient(180deg,rgba(20, 20, 15, 0) 0%, rgba(20, 20, 15, 1) 75%);
			position:fixed; /*footer fixé*/
	   		bottom: 0;	/*position en bas*/
	  		z-index:1000;	

	  		display: flex;
	  		justify-content: space-around;
	  		align-items: center;
		}
		.footer__div{
			height: 100;
			width: 40%;
			display: flex;
			justify-content: space-around;
		}
		.footer__div--left{
			left: 0;
			margin-left: 2%;
		}
		.footer__div--right{
			right: 0;
			margin-right: 2%;
		}
		.footer__btn{
			width: 50%;
			display: flex;
			justify-content: center;
		}
		.footer__btn a img{
			height: 40px;
			width: auto;
		}
		.footer__logo a img{
			height: 45px;
			width: auto;
			transform: translatey(-5px);
		}
		#footer__pp{
			height: 40px;
			width: 40px;
			z-index: 999;
			transform: translatey(-3px);
			border-radius: 40px;
			border: solid 2px #F1B400;
			overflow: hidden;
		}
		#footer__pp a{
			display: inline-block;
			height: 43px;
			width: 43px;
			border-radius: 43px;
			transform: translate(-1.5px, -1.5px);
		}
	/*footer*/
/*template*/

/*accueil*/
/*accueil*/

/*connexion*/

	.carteCo{
		background-color: #E8DBC5;
		overflow: hidden;
	}

	.carteCo form{
		height: 100%;
		width: 100%;
		position: relative;
	}

	.carteCo__header{
		height: 80px;
		width: 100%;

		border-radius: calc(90vw * 1.55 * 0.025);
		background-color: #CBC0AD;
		overflow: hidden;
		position: absolute;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	#carteCo__header__dispo{
		font-size: 8px;
		position: relative;
		z-index: 3;
	}
	.carteCo__list{
		height: 80%;
		width: 100%;
		
		position: relative;
		top: 0;
		z-index: 1;

		overflow-y: scroll;
		padding-top: 75px;
		scroll-padding-top: 75px;
		padding-bottom: 100px;
		scroll-padding-bottom: 100px;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}
	.carteCo__list .form_contact{
		width: 90%;
		height: 80%;
		margin:auto;
	}
	.carteCo__divider
	{
		height: 20px;
		width: 100%;

		margin-top: 40px;

		display: flex;
		justify-content: center;
	}
	.carteCo__divider span{
		height: 10px;
		
		margin: 5px 5px;

		background-color: #14140F;
		border-radius: 10px;
	}
	.carteCo__divider span:nth-child(1){
		width: 10px;
	}
	.carteCo__divider span:nth-child(3){
		width: 30%;
	}
	.carteCo__divider p{
		color: #FFFDF8;
		text-shadow: 0.7px 0.7px 0px #14140F, -0.7px -0.7px 0px #14140F,-0.7px 0.7px 0px #14140F, 0.7px -0.7px 0px #14140F;
	}
	.carteCo__footer{
		height: 100px;
		width: 100%;

		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.carteCo__footer p{
		margin: 5px 10px;
		font-size: 8px;
	}
	.bouton--carteCo__footer{
		height: 40px;

		margin-top: 20px;

		border-radius: 5px;

		font-size: 16px;
		font-weight: bold;
	}
	.bouton--CarteCo{
		height: 20px;
		width: 40%;

		margin-top: 20px;

		font-size: 8px;
	}
	/*input*/
		.carteCo__blocInput {
		  height: 40px;
		  width: 100%;

		  position: relative;
		  margin-top: 35px ;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  flex-shrink: 0;
		}
		.carteCo__blocInput--header{
			margin-top: 20px;
		}
		.carteCo__blocInput--header .carteCo__input{
			background-color: #E8DBC5;
		}
		.carteCo__blocInput--header .carteCo__blocLabel{
			background-color: #CBC0AD;
		}
		.carteCo__blocInput--maintien{
			flex: 1;

			margin-bottom: 20%;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: end;
		}
		.carteCo__blocInput--maintien input{
			transform: scale(1.5);
			margin: 0;
			margin-bottom: 2px;
		}
		.carteCo__input {
			width: 66%;
			height: 100%;
			flex-shrink: 0;

			background-color: #CBC0AD;
			border-radius: 4px;
			border: 0;
			outline: 0;
			box-sizing: border-box;
			box-shadow: 0px 2px 0px inset;
			
			color: #14140F;
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			
		}
		.carteCo__input--o{
			color: #FE3900;
		}
		.carteCo__blocLabel {
			width: 50%;
			height: 20px;

			position: absolute;
			top: -15px;
			transform: translateY(0) scale(0.5);
			background: #E8DBC5;
			border-radius: 4px;

			transition: transform 200ms, box-shadow 200ms;
		}
		.carteCo__input:focus ~ .carteCo__blocLabel,
		.carteCo__input:not(:placeholder-shown) ~ .carteCo__blocLabel {
			transform: translateY(3px) scale(1.0);
			box-shadow: 0px 1px 1px #14140F;
		}
		.carteCo__label {
			top: 10px;

			color: #14140F;
			font-weight: bold;
			position: absolute;

			transition: transform 0.2s, color 0.2s;
		}
		.carteCo__label--o{
			color: #FE3900;
		}
		.carteCo__input:focus ~ .carteCo__label,
		.carteCo__input:not(:placeholder-shown) ~ .carteCo__label {
			transform: translateY(-20px) scale(0.75);
			color: #14140F;
		}
		.carteCo__input:focus ~ .carteCo__label {
			color: #14140F;
		}
		.carteCo__blocInput__tips{
			margin-top: 5px;

			display: none;
			font-size: 8px;
			color:#14140F;
		}
		.carteCo__blocInput__tips span{
			color: green;
			font-weight: bold;
		}
	/*input*/

/*connexion*/

/*admin*/
	.blocLog{
		width: 90vw;
		height: 50px;

		position: relative;
		margin: 20px 5%;

		border-radius: 10px;
		box-shadow: 3px 3px black;
		background-color: #E8DBC5;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		color:#14140F;
	}
	.blocLog--dev{
		height: 200px;
	}
	.blocLog__datetime{
		width: 66%;

		position: relative;
		margin-left: 17%;
		top:-1px;
		border-radius: 2px;
		/*border: solid 1px #14140F;*/
		/*background-color: #14140F;*/
		box-shadow: 0px 1px 3px #14140F;
		color: #14140F;
		text-align: center;
	}
	.blocLog__titre{
		width: 90%;
		margin: 5px 5%;
		text-align: center;
		color: #14140F;
		font-weight: bold;
	}
	.blocLog__content{
		width: 95%;
		flex: 1;

		margin-left: 2.5%;
		font-size: 12px;

		overflow-y: scroll;
		scrollbar-width: none;       /* Firefox */
  	-ms-overflow-style: none;
	}
	.blocLog__infos{
		width: 95%;
		margin: 5px 2.5%;

		display: flex;
		justify-content: space-between;
		font-size: 8px;
	}
/*admin*/

/*tickets*/
	#barreTri{
		width: 50%;
		height: 50px;

		margin-left: 25%;
		margin-top: 25px;
		
		border-radius: 25px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: linear-gradient(135deg,rgba(220, 221, 225, 0.4) 10%, rgba(245, 246, 250, 0.15) 30%, rgba(220, 221, 225, 0.25) 50%, rgba(245, 246, 250, 0.2) 70%, rgba(220, 221, 225, 0.3) 90%)

		/*display: none;*/
	}
	#barreTri img{
		height: 25px;
		width: auto;
		cursor:pointer;
	}
	#Trier{
		transform: rotate(180deg);
	}

/*Compte*/
	#compte__blocBtn{
		width: 80%;

		margin: 5% 10%;

		display: flex;
		justify-content:space-between;
	}
	#compte__blocBtn .bouton{
		width:40%;
		height: 40px;
	}

	.compte__vitrine{
		width: 95%;
		height: 360px;

		position: relative;
		margin: 2.5%;
		margin-top: 10%;

		display: flex;
		background: rgba(255, 255, 255, 0.05); /* léger voile pour la vitrine */
		backdrop-filter: blur(8px); /* verre dépoli, effet moderne */
		border-radius: 1rem;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
	}
	.compte__vitrine:nth-last-child(1){
		/*margin-bottom: 50%;*/
	}

	.compte__vitrine__titre{
		height: 20px;
		width: 50%;

		position: relative;
		top:-10px;
		left: 25%;

		background-color: #14140F;
		color: #FFFDF8;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.compte__vitrine__content{
		width: 100%;
		height: 96%;

		position: absolute;
		top:4%;
		left: 0;
		display: flex;
		overflow-y: scroll;
		scrollbar-width: none;       /* Firefox */
  		-ms-overflow-style: none;
	}

	.compte__vitrine__content .carteL:nth-child(1){
		margin-left: 15%; /*jsp pk 15%*/
	}

	.compte__vitrine__content .carteL:nth-child(3){
		margin-right: 15%; /*jsp pk 15%*/
	}

	.compte__vitrine__btn{
		height: 20px;
		width: 50%;
		position: absolute;
		bottom:-10px;
		left: 25%;
	}

	.vitrine__stats{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	.vitrine__stats__courbe{
		width: 100%;
		height: auto;
		min-height: 180px;
		max-height: 540px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.vitrine__stats__ind{
		height: 35%;
		width: 90%;

		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.vitrine__stats__ind__bulle{
		height: 80%;
		width: 30%;

		overflow: hidden;
		border-radius: 25px;
		background-color: grey;
		color:#14140F;
	}
	.vitrine__stats__ind__value{
		height: 50%;
		width: 100%;

		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.5em;
		font-weight: 1000;
		background-color: darkgrey;
	}
	.vitrine__stats__ind__label{
		height: 50%;
		width: 100%;

		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.vitrine__stats__ind__label p{
		width: 90%;
		text-align: center;
	}
	/*Bibliotheque*/
		#explSkin{
			width: 80%;
			margin-left: 10%;
			margin-top: 20px;

			font-size: 0.8em;
			color:#FFFDF8;
			text-align: justify;
		}
		.bibliotheque__vitrine{
			width: 95%;

			position: relative;
			margin: 2.5%;
			margin-top: 10%;

			display: flex;
			flex-direction: column;
			background: rgba(255, 255, 255, 0.05); /* léger voile pour la vitrine */
			backdrop-filter: blur(8px); /* verre dépoli, effet moderne */
			border-radius: 1rem;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
		}

		.bibliotheque__vitrine__titre{
			height: 20px;
			width: 50%;

			position: relative;
			top:-10px;
			left: 25%;

			background-color: #14140F;
			color: #FFFDF8;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bibliotheque__vitrine__content{
			width: 100%;

			position: static;
			
			display: flex;
			flex-wrap:wrap;
			justify-content: center;
			scrollbar-width: none;       /* Firefox */
	  		-ms-overflow-style: none;
		}

		.bibliotheque__skin{
			margin-bottom: 10px;

			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.carteBiblio{
			display: flex;
			justify-content: center;
			align-items: center;

			cursor: pointer;
		}
		.carteBiblio a{
			display: none;
		}
		.carteBiblio p{
			display: none;

			width: 90%;

			text-align: center;
			font-size: 0.8em;

			color:#FFFDF8;
			text-shadow: 0.5px 0.5px 0px #14140F, -0.5px -0.5px 0px #14140F,-0.5px 0.5px 0px #14140F, 0.5px -0.5px 0px #14140F;
		}
		/*.carteBiblio:hover a, .carteBiblio:active a, .carteBiblio:focus a{
			display: flex;
		}
		.carteBiblio:hover p, .carteBiblio:active p, .carteBiblio:focus p{
			display: flex;
		}

		.carteBiblio.open a{
			display: flex;
		}
		.carteBiblio.open p{
			display: flex;
		}*/

		.bibliotheque__skin__titre{
			width: 100px;
			height: 25px;
			position: relative;
			border-radius: 15px;
			/* Fond métallique : gradient radial + linear */
			background:
			radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.22), transparent 12%),
			linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12)),
			linear-gradient(90deg, #c8d6e5 0%, #8395a7 40%, #576574 70%, #c8d6e5 100%);
			overflow: visible;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1.05rem;
			box-sizing: border-box;
		}
		.bibliotheque__skin__titre::before{
			content:"";
			position:absolute;
			inset: 0;
			border-radius: inherit;
			pointer-events: none;
			/* anneau bordure métallique */
			box-shadow:
			0 0 0 2px rgba(255,255,255,0.06) inset,
			0 0 0 3px rgba(0,0,0,0.18) inset,
			0 3px 9px rgba(0,0,0,0.45);
			mix-blend-mode: overlay;
		}

		.bibliotheque__skin__titre p{
			margin: 0;
			font-weight: 600;
			letter-spacing: 0.05em;
			font-size: 0.8rem;
			color: #0e0c07; /* ton texte "creux" sombre */
		}
	/*Bibliotheque*/
	/*stats*/
		.ligneStats{
			width: 100vw;
			height: 180px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		.ligneStats--graphBK{
			flex-direction: column; 
			background: #FFFDF811; 
			margin-top: 20px; 
			
			height: auto;
			min-height: 180px;
			max-height: 540px;
			justify-content: center;
		}

		/*diagramme bankroll*/
			.graphBK{
				width: 96%;
				margin: 0 2%;

				display: flex;
				align-items: end;
				justify-content: start;
			}
			.graphBK__titre{
				margin: 10px;
			}
			.graphBK__bulle{
				max-width: 17px;
			}
			.graphBK__value{
				height: 100px;
				padding: 2px;

				background: #F1B400;
				color:#14140F; 
				font-size: 0.6em; 
				font-weight: 800; 
				writing-mode: vertical-rl; 
				text-orientation: mixed; 		
			}
			.graphBK__label{
				margin:7px 0; 

				font-size: 0.5em; 
				font-weight: 800; 
				transform: rotate(45deg);
			}
		/*diagramme bankroll*/
	/*stats*/

	/*edition*/
		.carteEdit{
			overflow: scroll;
			scrollbar-width: none;       /* Firefox */
  			-ms-overflow-style: none;
		}
		.carteEdit form{
			width: 95%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.carteEdit .carteJoueur__pp{
			position: relative;
		}
		.carteJoueur__pp__edit{
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}
		.carteEdit .carteJoueur__pp input{
			position: absolute;
			bottom:0;
			outline: none;
			color:transparent;
			width: 100%;
			box-sizing: border-box;
			padding: 20px 120px;
			cursor: pointer;
		}
		/*.carteEdit .carteJoueur__pp input::-webkit-file-upload-button{
			visibility: hidden;
		}*/
		.carteEdit__PP{
			width: 100%;
			height: 100%;
		}
		.carteEdit__editPP{
			width: 20px;
			height: 20px;

			position: absolute;
			bottom:0;
			right: 0;
		}
		.carteEdit .carteCo__input{
			width: 80%;
		}
		.carteEdit .carteCo__blocLabel{
			transform: translateY(3px) scale(1.0);
			box-shadow: 0px 1px 1px #14140F;
		}
		.carteEdit .carteCo__label{
			transform: translateY(-20px) scale(0.75);
			color: #14140F;
		}

		.carteEdit__password{
			max-width: 100%;
			display: flex;
		}

		.carteEdit__password .carteCo__blocInput{
			width: 50%;
		}

		.carteEdit .bouton{
			width: 30%;
			margin: 20px 35%;
		}
		.carteEdit__tips{
			width: 80%;

			margin-top:10px;

			font-size: 0.7em;
			color: #FFFDF8;
			text-shadow: 0.5px 0.5px 0px #14140F, -0.5px -0.5px 0px #14140F,-0.5px 0.5px 0px #14140F, 0.5px -0.5px 0px #14140F;
		}
	/*edition*/
/*Compte*/

/*info*/
	.info_bloc1{
		width: 100%;
		height: 100px;

		margin: 5% 0%;
		position: relative;

		background: linear-gradient(126deg,rgba(220, 221, 225, 1) 10%, rgba(245, 246, 250, 1) 50%, rgba(220, 221, 225, 1) 90%)	;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-weight: 600;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
	}
	.info_bloc1 p{
		margin: 0% 5%;
	}
	.info_bloc1 div{
		font-size: 3em;
		font-weight: 1000;
		background: rgba(243, 165, 0, 1);
		background: radial-gradient(circle,rgba(243, 165, 0, 1) 10%, rgba(241, 180, 0, 1) 50%, rgba(245, 150, 0, 1) 90%);
		-webkit-background-clip: text;
	    background-clip: text;
		color: transparent;
		margin-bottom: 10px;
	}


	.info_bloc2{
		width: 80%;
		height: 50px;

		margin: 0% 10%;
		position: relative;

		border-radius: 10px;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-weight: 400;
		text-align: center;
		color: #FFFDF8;
	}

/*info*/