.container {
    display: flex;
    justify-content: space-between; /* espace entre les blocs */
    gap: 50px; /* optionnel, espace fixe entre blocs */
}

.block {
    flex: 1; /* chaque bloc prend une part égale */
    height: auto;
    text-align: center;
}

.msg {
	color: #00C400;
	/* display: block; */
}

.patate {
	margin: 0;        /* supprime les marges CSS */
    padding: 0;       /* supprime le padding CSS */
	z-index: 1;    /* devant */
	transition: transform 0.3s ease; /* durée de 0.3s avec une courbe d'animation douce */
}


.patate:hover {
	cursor: pointer;
	transform: scale(1.2); /* agrandissement à 120% */
}

.patate:active {
	transform: scale(1.4); /* agrandissement à 140% */
}



.item { 
	position: relative;
	margin: 10px; 
	padding: 10px; 
	cursor: pointer;
}
/*.item {
    visibility: hidden; 
	width: 200px; 
	background: #333; 
	color: #fff;
    text-align: center; 
	border-radius: 5px; 
	padding: 5px;
    position: absolute; 
	bottom: 120%; 
	left: 50%; 
	transform: translateX(-50%);
    opacity: 0; 
	transition: opacity 0.3s;
    pointer-events: none;
}*/

.tooltip {
	display: none;
	width: 200px; 
	background: #333; 
	color: #fff;
    text-align: center; 
	border-radius: 5px; 
	padding: 5px;
    position: absolute; 
	bottom: 120%; 
	left: 50%; 
	transform: translateX(-50%);
    opacity: 0; 
	transition: opacity 0.3s;
    pointer-events: none;
}

.item:hover .tooltip { display: block; opacity: 1; }

form {
	width: 100%; 
}
.popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  width: 300px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  display: none;
}
.popup_reset {
	background: #FF8A96;
}
.popup_sauv {
  background: #96FF8A;
}
.popup_reload {
  background: #2787F5;
}
.popup button {
  margin: 10px;
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.ok_reset {
  background: #DC3545;
  color: white;
}
.ok_sauv {
  background: #35DC78;
  color: white;
}
.ok_reload {
  background: #73B6FF;
  color: white;
}
.cancel {
  background: #6c757d;
  color: white;
}
.ok:hover { background: #b02a37; }
.cancel:hover { background: #5a6268; }
.btn-centre {
	  height: 200px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 20px; /* espace de 20px entre les boutons */
}

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;          /* rend le div rond */
    background-color: #3498db;   /* couleur du cercle */
    display: flex;               /* active Flexbox */
    align-items: center;         /* centre verticalement */
    justify-content: center;     /* centre horizontalement */
    text-align: center;          /* au cas où le texte fait plusieurs lignes */
    color: white;                /* couleur du texte */
    font-weight: bold;           /* texte en gras */
    font-size: 15px;             /* taille du texte */
}


.container_achats {
    display: flex;
    align-items: center; /* aligne verticalement le bouton et le cercle */
    gap: 10px;           /* espace entre le bouton et le cercle */
}

.container_stats {
    display: flex;
    align-items: center; /* aligne verticalement le bouton et le cercle */
	margin-left: 100px; /* Décale l'élément de 50 pixels vers la droite */
	gap: 10px;
}