/* Style général pour le corps de la page */
/* Keep in sync with layouts/base.html fixed navbar offset */
body {
  padding-top: var(--nav-height);
}

.typed-cursor {
    color: #2563eb; /* Couleur bleu-600 pour correspondre au texte */
    font-weight: 200;
}

.hero1{
    border-radius: 20% 20% 0% 50% / 58% 58% 28% 0%;
}

.hero2{
    border-radius: 30% 30% 0% 55% / 58% 58% 28% 0% ;
}
section .pre p {
    color: #130f40;
}

.cards {
    display: flex;
    flex-wrap: wrap; /* Permet aux cards de passer à la ligne si nécessaire */
    justify-content: center; /* Centre les cards horizontalement */
    gap: 20px; /* Espacement entre les cards */
    margin-top: 40px;
  }
  
  /* Style général des cards */
  .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 100%;
    max-width: 280px; /* Limite la taille des cards */
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: transform 0.4s ease, filter 0.4s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  /* Effet au survol des cards */
  .card:hover {
    transform: scale(1.1);
  }
  
  .cards:hover > .card:not(:hover) {
    filter: blur(5px);
  }
  
  /* Couleurs des cards */
  .card.red {
    background-color: #ffeb5b;
  }
  
  .card.blue {
    background-color: #233dff;
  }
  
  .card.green {
    background-color: #169d53;
  }
  
  .card .tip {
    font-size: 1.2em;
    font-weight: bold;
  }
  
  .card .second-text {
    font-size: 0.9em;
    margin-top: 10px;
  }

  @media (max-width: 640px) {
    .card {
      max-width: 100%; 
    }
  }