/* Mode grid pure */
/* Styles pour les appareils mobiles (par exemple, écrans de moins de 768px de largeur) */
	body {
		font-family: 'Arial', sans-serif;
		margin: 0;
		padding: 0;
		background-color: #ffffff;
		font-size: 20px;
	}
	.mobile{
		font-size: 12px;
	}
	#dossardInput{
		height: 50px;
		width: 200px;
		font-size: 40px;
		font-weight: 800;
		text-align: center;
	}
	#btnnum{
		height: 50px;
		font-size: 30px;
		font-weight: 900;
	}
	.btnnum{
		margin-top: 3px;
		height: 50px;
		font-size: 32px;
		
	}
	.btnnum {
	  appearance: none;
	  backface-visibility: hidden;
	  background-color: #61bd4f;
	  border-radius: 8px;
	  border-style: none;
	  box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
	  box-sizing: border-box;
	  color: #fff;
	  cursor: pointer;
	  display: inline-block;
	  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
	  font-size: 16px;
	  font-weight: 600;
	  letter-spacing: normal;
	  line-height: 1.5;
	  outline: none;
	  overflow: hidden;
	  padding: 1px 13px 3px 13px;
	  position: relative;
	  text-align: center;
	  text-decoration: none;
	  transform: translate3d(0, 0, 0);
	  transition: all .3s;
	  user-select: none;
	  -webkit-user-select: none;
	  touch-action: manipulation;
	  vertical-align: top;
	  white-space: nowrap;
	}
	
	.btnnum:hover {
	  background-color: #ffffff;
	  opacity: 1;
	  color: #61bd4f;
	  border: 1px solid #61bd4f;
	  transform: translateY(0);
	  transition-duration: .35s;
	}
	
	.btnnum:active {
	  transform: translateY(2px);
	  transition-duration: .35s;
	}
	
	.btnnum:hover {
	  box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
	}
	.parent {
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	width: 80%;
	margin: 0 auto;
	}
	.parentheader{
		background-color: #61bd4f; 
	}
	.div-header{
		font-weight: 900;
		align-self: center;
	}
	.parent1{
		background-color: rgba(69, 160, 73, 0.447); 
	}
	.parent2{
		background-color: #d9d9d9; 
	}
	.div-class { 
	  grid-area: 1 / 1 / 2 / 2; /* Ajustez la largeur */
	 /* width: 10%; /* Largeur en pourcentage de la largeur parent */
	  font-size: 24px; /* Réduisez la taille de la police pour mobile */
	  text-align: center;
	  align-self: center;
	  margin: 5px 0 5px 0;
	}
	
	.div-classmobile { 
	  grid-area: 1 / 1 / 2 / 2; /* Ajustez la largeur */
	 /* width: 10%; /* Largeur en pourcentage de la largeur parent */
	  font-size: 19px; /* Réduisez la taille de la police pour mobile */
	  text-align: center;
	  align-self: center;
	  margin: 5px 0 5px 0;
	}
	.div-nom { 
		grid-area: 1 / 2 / 2 / 5;
		margin-top: 5px;
	}
	.div-nompass { 
		grid-area: 1 / 2 / 2 / 4;
		margin-top: 5px;
	}
	.div-club { 
		grid-area: 1 / 5 / 2 / 9;
	}
	.div-clubpass { 
		grid-area: 1 / 4 / 2 / 6;
	}
	.divch { 
		grid-area: 1 / 6 / 2 / 7;
		text-align: center;
	}
	.divci { 
		grid-area: 1 / 7 / 2 / 8;
		text-align: center;
	}
	.divma { 
		grid-area: 1 / 8 / 2 / 9;
		text-align: center;
	}
	.div-temps { 
		grid-area: 1 / 9 / 2 / 10;
	}
	.div-div-cltsx {
		grid-area: 1 / 10 / 2 / 11;
	}
	.dic-cltcat {
		grid-area: 1 / 11 / 2 / 12;
	}
	.div-ligne1, .div-ligne2, .div-ligne3 { 
	  padding: 2px; /* Ajoutez des marges intérieures pour l'espacement */
	  margin-top: 3px;
	}
	.div-cltsx,.divpass {
		text-align: center;
		align-self: center;
	}
	.div-nom, .div-club, .div-temps,.div-clubpass,.div-cltsx, .div-cltcat{
		text-align: left;
		align-self: center;
	}
/* Fin Mode grid pure */