@charset "utf-8";
/* CSS Document */
#huiles-section{
text-align:left;
margin:20px 0;
}
.huiles-text{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
color:#CC6600;
font-weight:bold;
}

@media(max-width:768px){
	.huiles-text{
	font-size:20px;
}
}

@media(max-width:480px){
	.huiles-text{
	font-size:18px;
}
}


.huiles-text i{
margin:0 5px;
	font-size:24px;
	vertical-align:middle;
}


/*------------------------------------------------*/
.sidebarrond {
            background-color: #4CAF50;
            color: #343a40;
            padding: 20px;
            border-radius: 50%;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 250px;
            flex-shrink: 0;
			margin-top: 20px; /* Ajouter de l'espacement en haut */
			/*justify-content: center;
			align-items: center;*/

        }

		.hidden {
            opacity: 0; /* Rendre invisible */
            pointer-events: none; /* Désactiver les interactions */
        }
        .hidden-input {
            display: none; /* Cacher l'input */
        }
        .sidebarrond h2 {
            color: white;
            margin: 0px;
			font-size:18px;
			justify-content: center;
			align-items: center;

        }
        .value {
            color: white;
            font-size: 24px;
            margin: 10px 0;
			top:10px;
        }
        input[type="number"] {
            width: 80px;
            padding: 5px;
            border: none;
            border-radius: 5px;
        }
/* Media Query pour les tablettes */
@media (max-width: 992px) {
    .sidebarrond {
        width: 150px; /* Réduire la largeur */
        height: 150px; /* Réduire la hauteur */
        font-size: 0.8em; /* Réduire la taille du texte si nécessaire */
        left: 10px; /* Ajuster la position */
        margin-left: 50px;
    }
    .sidebarrond h2 {
		font-size:16px;
		align-items: center;
	}
	.value {
		font-size: 20px;
		align-items: center;
	}
}

/* Media Query pour les téléphones mobiles */
@media (max-width: 768px) {
    .sidebarrond {
        width: 150px; /* Réduire encore plus la largeur */
        height: 150px; /* Réduire encore plus la hauteur */
        font-size: 0.7em; /* Réduire encore plus la taille du texte si nécessaire */
       /* position: fixed; /* Changer en position fixed */
        bottom: 20px; /* Positionner en bas */
        top: 1000px;
		left:100px;
       /* left: 50%; /* Centrer horizontalement */
       /* transform: translateX(-50%); /* Centrer horizontalement */
        margin-left: 50px; /* Supprimer la marge */
		
    }
    .sidebarrond h2 {
		font-size:14px;
		align-items:center;
	}
	.value {
		font-size: 16px;
		align-items: center;
	}
}

/*---------------------------------------------------------*/

.reduction {
            margin-left: 10px;
            padding: 5px 10px;
            background-color: #f0c040;
            border-radius: 5px;
            font-weight: bold;
        }
		
		.invisible-input {
            display: none;
        }
		
		
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }
        .blink {
            animation: blink 1s infinite;
        }
		
		/* Styles responsives */
        @media (max-width: 600px) {
           
            .reduction {
                font-size: 0.9em;
                padding: 4px 8px;
            }
        }