canvas {
    border: 2px solid black; /* Style du cadre */
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
}

.menu {
    width: 150px;
    padding: 20px;
    background-color: #f0f0f0;
}

.canvas-container {
    flex: 1;
    padding: 20px;
}



/* Style par défaut pour l'input type=file */
input[type="file"] {
    display: none; /* Masquer l'input par défaut */
}

/* Style personnalisé pour le bouton d'importation de fichier */
.custom-file-input {
    display: inline-block;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #3498db;
    border: 1px solid #2980b9;
    border-radius: 4px;
    cursor: pointer;
}

/* Style pour le label qui remplace le bouton d'importation de fichier */
.custom-file-label {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px; /* Ajustez la taille de police ici */
    background-color: #2c3e50;
    color: #fff;
    border: 1px solid #34495e;
    border-radius: 4px;
    cursor: pointer;
}

/* Ajoutez ces styles à votre fichier styles.css */

/* Style pour le bouton "Texte" */
#raz {
    display: inline-block;
    padding: 5px;
    font-size: 10px; /* Ajustez la taille du texte ici */
    
    color: #fff;
    background-color: #3498db;
    border: 1px solid #2980b9;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px; /* Ajustez la marge supérieure selon vos besoins */
}


label {
  display: block; /* Faire du label un bloc pour occuper toute la largeur disponible  */
  margin-bottom: 1px; /* Marge en bas du label */
  margin-top: 5px;
  font-size: 12px; /* Taille de la police du label */
  color: #666; /* Couleur du texte du label */
}


#maZoneTexte {
  width: 140px; /* Largeur de la zone de texte */
  padding: 5px; /* Espace intérieur de la zone de texte */
  font-size: 12px; /* Taille de la police */
  font-family: 'Arial', sans-serif; /* Police de caractères */
  color: #333; /* Couleur du texte */
  border: 1px solid #ccc; /* Bordure de la zone de texte */
  border-radius: 5px; /* Coins arrondis de la zone de texte */
  margin-bottom: 10px; /* Marge en bas de la zone de texte */
}

/* Bouton annuler et rétablir */

.bouton {
 
  display: inline-block;
  padding: 10px 15px;
  font-size: 24px;
  cursor: pointer;
  background-color: #4CAF50; /* Couleur de fond */
  color: #fff; /* Couleur du texte */
  border: none;
  border-radius: 4px;
  margin-right: 2px;
  margin-top: 5px;
  position: relative;
  
}

.fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  margin-left: -10px;

}

#annuler {
  background-color: #ff6666; /* Couleur de fond pour le bouton Annuler */

}

#retablir {
  background-color: #4CAF50; /* Couleur de fond pour le bouton Rétablir */

}

/* Carré selection couleur*/
#choisirCouleur {
  width: 30px; /* Largeur de l'élément */
  height: 30px; /* Hauteur de l'élément */
  border: 2px solid #555; /* Bordure de l'élément */
  border-radius: 5px; /* Coins arrondis de l'élément */
  cursor: pointer; /* Curseur au survol de l'élément */
  margin-top : 2px;

}

#couleur_remplissage {
  width: 30px; /* Largeur de l'élément */
  height: 30px; /* Hauteur de l'élément */
  border: 2px solid #555; /* Bordure de l'élément */
  border-radius: 5px; /* Coins arrondis de l'élément */
  cursor: pointer; /* Curseur au survol de l'élément */
  margin-top : 2px;

}




/* Label de police de caractères */
.labelPolice {
  color: #3498db; /* Couleur du texte du label */
  font-weight: bold; /* Gras */
  margin-bottom: 1px; /* Marge en bas */

  

}

.ligne {
  display: flex; /* Utilise Flexbox pour aligner les éléments sur la même ligne */
}

.custom-dropdown {
  position: relative; 
  display: inline-block;

  
}

.custom-dropdown select {
  appearance: none; /* Masque le style par défaut de la liste déroulante */
  -webkit-appearance: none; /* Pour certains navigateurs basés sur WebKit */
  -moz-appearance: none; /* Pour Firefox */
  padding: 5px 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px; /* Taille de la police pour la liste déroulante */
  

  
}

.custom-dropdown:after {
  content: '\25BC'; /* Utilise une flèche vers le bas (▼) comme indicateur */
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  pointer-events: none;
   
}

/* Style des options */
.custom-dropdown select option {
  font-size: 12px; /* Taille de la police pour les options */
  
}