body {
        font-family: "Roboto", "Montserrat", "Lato", "Open Sans"; /* Exemple de police de caractères */
            background-color: #ffffff;
        margin: 0;
        padding: 0;
      }
  
      .container-all{
        background-color: #ffffff;
        margin-top: 8.7%;
      }
      .container {

        max-width: 90%;
        margin:  0 auto;
        padding: 1px;
        text-align: center;
      }
  
      .options {
          justify-content: center;
  align-items: center;
  text-align:justify;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        width: 80%;
        
      }
  
      .option {
        width: 80%;
        flex-basis: 10%;
        background-color: #fff;
        border-radius: 6px;
        padding: 20px;
        margin-right: 10px;
        box-shadow: 0 2px 4px rgba(1, 0, 0, 0.3);
        transition: transform 0.3s ease;
        cursor: pointer;
        text-decoration:none;
      }
  
      .option:hover {
        transform: translateY(-5px);
        background-color:  #217bbc;
        color: #fff;
        text-decoration:none;
      }
      .option h2 {
        color: #333;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .option  h2:hover {
        color: #faf9f9;
        font-size: 18px;
        margin-bottom: 10px;
      }
      .option p {
        color: #666;
        font-size: 14px;
        text-decoration:none;
      }
      .option p:hover {
        color: #ffffff;
        font-size: 14px;
        text-decoration:none;
      }
    img{
      width: 250px;
      height: 150px;
      border-radius: 15px;
    }

/* STYLE DE LA PAGE RESSOURCES */

 #top-resources {
      display: flex;
  }
  
  #res-block1 {
      flex: 1; /* Prendra autant d'espace que possible */
      padding: 20px;
  }
  
  #res-block2 {
      flex: 1; /* Prendra autant d'espace que possible */
      max-width: calc(33.33% - 20px);
      padding: 20px;

  }
 
.res-block2 {
    border:  1px solid rgb(255, 254, 254);
    padding: 5px;
    align-items: center;
}
  

.menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.menu a {
  text-decoration: none;
}

.menu-item {
  display: flex;
  align-items: center;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: rgb(3, 12, 58);
  border-radius: 50%;
  margin-right: -30px;
}

.label {
  background-color: rgb(3, 12, 58);
  color: white;
  padding: 10px 20px;
  border-radius: 40px;
  font-weight: bold;
  min-width: 200px;
  text-align: center;
}


  @media (max-width: 768px) {
      #top-resources {
          flex-direction: column; /* Affichage en colonnes sur les petits écrans */
      }
  
      #res-block1,
      #res-block2 {
          flex: none; /* Réinitialise la flexibilité pour revenir à une mise en colonne */
      }
  }