.red {
    border: 4px solid #FF4500; 
  }
  
  .orange {
    border: 4px solid #FFA500; 
  }
  
  .yellow {
    border: 4px solid #FFFF00; 
  }
  
  .green {
    border: 4px solid #32CD32; 
  }
  
  .blue {
	  border: 4px solid #1E90FF;
  }
  
  .indigo {
    border: 4px solid #4B0082;
  }
  
  .violet {
    border: 4px solid #9400D3; 
  }
  
  .commun {
    padding: 5px;
    margin: 5px;
  }




.c11{
    background-color: #E6E6FA;
    border: 4px solid #FF4500; 

}


.c21{
    background-color: #F5FFFA;
    border: 4px solid #FFA500; 

}


.c31{
    background-color: #FFE4E1;
    border: 4px solid #FFFF00; 

}


.c41 {
    background-color: #D0F0C0;
    border: 4px solid #32CD32; 

}


.c51 {
    background-color: #FAFAD2;
    border: 4px solid #1E90FF;

}


.c61{
    background-color: #ADD8E6;
    border: 4px solid #4B0082;

}

.c71{
  background-color: #e6ade1;
  border: 4px solid #9400D3; 

}




/* Conteneur principal de la page, avec le contenu principal et la sidebar */
.container {
  display: flex;
  flex-direction: row; /* Par défaut, les éléments sont alignés en ligne (horizontale) */
}

/* Le contenu principal de la page */
.content {
  flex: 3;
  padding: 20px;
  background-color: #f9f9f9;
}

/* Sidebar contenant le contenu sticky (comme les publicités ou autres éléments) */
.sidebar {
  flex: 1;
  position: -webkit-sticky; /* Compatibilité pour Safari */
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 10px;
  border: 1px solid #ccc;
}

/* Conteneur des 7 boîtes à l'intérieur de la sidebar */
.sticky-content {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de revenir à la ligne si l'espace est limité */
  gap: 10px; /* Ajoute un espace entre les boîtes */
}

/* Style général pour chaque boîte */
.box {
  flex: 1 1 120px; /* Chaque boîte prend au minimum 120px mais peut s'étendre */
  padding: 10px;
  background-color: #ddd; /* Couleur de fond par défaut */
  border: 1px solid #999; /* Bordure pour chaque boîte */
  text-align: center; /* Centrer le contenu des boîtes */
  margin-bottom: 5px; /* Espace en bas de chaque boîte pour réduire l'espace vertical */
  text-decoration: none !important; /* Retirer le soulignement par défaut des liens */
  color: inherit; /* Garde la couleur définie par la boîte (hérite de .c1, .c2, etc.) */
  display: flex; /* Ajoute du flex pour centrer le contenu de la boîte */
  align-items: center; /* Centre verticalement le contenu */
  justify-content: center; /* Centre horizontalement le contenu */
}



/* Couleurs spécifiques de hajar pour chaque boîte 
.c1 { background-color: #FFCFCF; }
.c2 { background-color: #FFE5CC; }
.c3 { background-color: #FFF9CC; }
.c4 { background-color: #D8FFD8; }
.c5 { background-color: #CCE5FF; }
.c6 { background-color: #E0CCFF; }
.c7 { background-color: #F3CCFF; }
*/
.c0 { background-color: #000000; border: 1px solid #D32F2F; color:#FFFFFF; } 

.c1 { background-color: #FFCCBC; border: 1px solid #D32F2F; margin-bottom: 0.5rem; } /* Rouge */
.c2 { background-color: #FFE0B2; border: 1px solid #FFA000; margin-bottom: 0.5rem; } /* Orange */
.c3 { background-color: #FFF59D; border: 1px solid #F57F20; margin-bottom: 0.5rem; } /* Jaune */
.c4 { background-color: #DCEDC8; border: 1px solid #388E3C; margin-bottom: 0.5rem; } /* Vert */
.c5 { background-color: #E1F5FE; border: 1px solid #0288D1; margin-bottom: 0.5rem; } /* Cyan */
.c6 { background-color: #F1E1FA; border: 1px solid #7B1FA2; margin-bottom: 0.5rem; } /* Violet */
.c7 { background-color: #FFFDE7; border: 1px solid #FBC02D; margin-bottom: 0.5rem; } /* Jaune pâle */


/* Media query pour petits écrans (en dessous de 768px) */
@media (max-width: 768px) {
  /* Ne change pas l'alignement horizontal, garde le wrap mais réduit la taille des boîtes */
  .sticky-content {
    gap: 5px; /* Réduire l'espace entre les boîtes pour économiser de l'espace */
  }

  .box {
    flex: 1 1 100px; /* Les boîtes prennent au minimum 100px */
    padding: 8px; /* Réduire légèrement le padding pour éviter le débordement */
    margin-bottom: 5px; /* Réduire l'espace vertical en bas des boîtes */
  }
}

/* Media query pour très petits écrans (en dessous de 480px) */
@media (max-width: 480px) {
  /* Réduire encore la taille minimale et le padding pour petits écrans */
  .sticky-content {
    gap: 5px; /* Réduire l'espace entre les boîtes */
  }

  .box {
    flex: 1 1 80px; /* Les boîtes prennent au minimum 80px */
    padding: 5px; /* Réduire le padding */
    font-size: 12px; /* Diminuer la taille de la police */
    margin-bottom: 2px; /* Réduire l'espace vertical entre les boîtes */
  }
}

@media (max-width: 768px) {
  .sticky-content {
    gap: 5px; /* Réduit l'espace entre les boîtes sur les petits écrans */
  }

  .box {
    flex: 1 1 100px; /* Taille minimale de chaque boîte à 100px */
    padding: 8px; /* Réduction du padding pour économiser de l'espace */
    margin-bottom: 5px; /* Espace réduit entre les boîtes pour les petits écrans */
  }
}