/* CSS Document */

  footer small {
    font-size: 0.2em;
    font-style: italic;
  }

        
        .carte {
            width: 250px;
            height: 350px;
            border: 1px solid black;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            font-family: sans-serif;
            margin-left: calc(20%); /* Décale la carte vers la droite */
        }


    
		.container {
            display: flex;
            flex-direction: column;
            align-items: flex_start; /* Centrer le contenu à l'intérieur */
        }


		img {
			max-width: 100%;
			height: auto;
		}
        
       

		.text {
			margin-top: 20px;
			font-size: 24px;
			font-weight: bold;
			// text-align: center;
            margin-left: calc(26%); /* Décale la carte vers la droite */
		}
                
        /* Style global pour tous les inputs */
        input {
            font-size: 40px; /* Augmenter la taille du texte pour les autres champs */
            padding: 10px; /* Ajouter du padding pour les autres inputs */
        }

        /* Style spécifique pour l'input avec l'ID 'consigne' */
        /* Style global pour tous les inputs */
input {
    font-size: 40px; /* Taille du texte pour les autres champs */
    padding: 10px;   /* Padding pour les autres inputs */
}

/* Style spécifique pour l'avertissement d'un message d'alerte à la console */
 #alert-message {
      display: none;
      color: red;
      font-weight: bold;
      margin: 10px;
    }

/* Style spécifique pour l'input avec l'ID 'nIndex' */
#nIndex {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background-color: #007bff; /* Bleu */
    color: white; /* Texte blanc */
    border: 1px solid #0056b3; /* Bordure bleue plus foncée */
    cursor: default; /* Pas de curseur de clic */
    font-size: 16px; /* Taille de police pour correspondre aux boutons */
    text-align: center; /* Centrer le texte */
}



        /* Style spécifique pour l'input avec l'ID 'consigne' */
        #consigne {
            width: 500px;           /* Largeur spécifique pour l'input consigne */
            font-size: 20px;        /* Taille du texte spécifique pour consigne */
            padding: 5px;           /* Padding spécifique pour consigne */
            box-sizing: border-box; /* Inclure le padding dans la largeur */
        }

/* Style spécifique pour l'input avec l'ID 'nInddex' */
        #nIndex {
            width: 50px;           /* Largeur spécifique pour l'input  */
            font-size: 20px;        /* Taille du texte spécifique pour nIndex */
            padding: 5px;           /* Padding spécifique pour nIndex */
            box-sizing: border-box; /* Inclure le padding dans la largeur */
        }
        
        /* Style spécifique pour l'input avec l'ID 'nInddex' */
        #maxIndex {
            width: 50px;           /* Largeur spécifique pour l'input  */
            font-size: 20px;        /* Taille du texte spécifique pour nIndex */
            padding: 5px;           /* Padding spécifique pour nIndex */
            box-sizing: border-box; /* Inclure le padding dans la largeur */
        }
        
        /* Style spécifique pour l'input avec l'ID 'nInddex' */
        #nomCategorie {
            width: 500px;           /* Largeur spécifique pour l'input  */
            font-size: 20px;        /* Taille du texte spécifique pour nIndex */
            padding: 5px;           /* Padding spécifique pour nIndex */
            box-sizing: border-box; /* Inclure le padding dans la largeur */
        }


/* Style pour les nouveaux boutons sous la liste déroulante */
.option-button {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background-color: #007bff; /* Bleu */
    color: white; /* Texte blanc */
    border: 1px solid #0056b3; /* Bordure bleue plus foncée */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.option-button:hover {
    background-color: #0056b3; /* Bleu foncé au survol */
}


        
        .button-container {
            display: flex;
            justify-content: flex-start; /* Aligner les boutons à gauche ==>au lieu de : space-between; */
            width: 100%;
            max-width: 500px;
        }


		button {
			font-size: 16px;
			font-weight: bold;
			padding: 10px;
			border: none;
			border-radius: 5px;
			background-color: #4CAF50;
			color: white;
			cursor: pointer;
            margin-right: 10px;
		}

		select {
			font-size: 16px;
			padding: 10px;
			border: none;
			border-radius: 5px;
			background-color: #f1f1f1;
			cursor: pointer;
		}