.container {
  display: flex; /* Active le mode Flexbox */
  height: 100vh; /* Optionnel : prend toute la hauteur de l'écran */
}

.volet-gauche {
  flex: 1; /* Occupe une part de l'espace disponible */
  background-color: #f0f0f0;
}

.volet-droit {
  flex: 2; /* Occupe également une part (donc 2/3) */
  background-color: #ddd;
}

.form-group { margin-bottom: 15px; }
textarea { display: block; margin-bottom: 10px; width: 300px; height: 100px; }

.zone{
width: 100%;       /* Prend toute la largeur disponible */
    max-width: 500px;  /* Limite la largeur maximale */
    height: 60px;     /* Définit la hauteur */
    padding: 2px;     /* Ajoute de l'espace interne pour le confort */
    font-size: 16px;   /* Augmente la taille de la police */}


tr.maligne > td {
width:40px;
height:40px;
text-align:center;
color:white;
background-color:#669966;}/*#33FF74;}*/

tr.moncode > td {
width:40px;
height:40px;
color : black;
text-align:center;
background-color:#990000;}/*#33FF74;}*/



  /* Couleur de fond pour l'en-tête */
  th {
    background-color: #4CAF50;
    color: white;
  }
.joli{
/* Couleurs et bordures */
    background-color: #3498db; /* Bleu moderne */
    color: white;
    border: none;
    border-radius: 8px; /* Coins arrondis */
    
    /* Taille et espacement */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold; 
}
 
/* Effet au passage de la souris (Hover) */
  .joli:hover {
    background-color: #2980b9; /* Bleu plus foncé */
    transform: translateY(-2px); /* Petit saut vers le haut */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  /* Effet lors du clic (Active) */
  .joli:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
   
    
  }



img{
       width:50%;
height : 50%;}       

//table.matable{
//margin : 20px auto;}