/* --- POPUP GLOBAL --- */
.modal {
  /* Arrière-plan (couleur claire et légèrement floue) */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Couleur de fond très claire (comme sur l'image) */
  background: rgba(239, 239, 235, 0.7); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(2px); /* Effet de flou */
}

/* --- CONTENU (La boîte blanche) --- */
.modal-content {
  background: #ffffff; /* Fond blanc pur */
  width: 90%; /* Pour les petits écrans */
  max-width: 500px; /* Largeur max comme dans l'image */
  min-width: 300px;
  padding: 40px 30px; 
  border-radius: 20px;
  /* Ombre douce */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); 
  text-align: center;
}

/* --- TEXTES --- */
/* Style pour le titre principal (bleu foncé) */
.modal-content strong {
    font-weight: 700;
    color: #0a2a43; /* Couleur bleu foncé */
}

/* Style pour la phrase de bienvenue */
.modal-content p:first-of-type {
  font-size: 1.5rem; /* Un peu plus grand pour la bienvenue */
  font-weight: 400;
  color: #0a2a43;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Style pour la question (gris/noir) */
.modal-content p:last-of-type {
  font-size: 1rem;
  color: #333333;
  margin-bottom: 30px;
}

/* --- BOUTONS CONTENEUR --- */
.buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* --- BOUTONS GÉNÉRAUX --- */
.buttons button {
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 10px; /* Bordures légèrement moins arrondies */
  border: none;
  cursor: pointer;
  transition: 0.2s;
  flex-grow: 1; /* Pour que les boutons occupent l'espace */
  max-width: 180px;
}

/* --- BOUTON PROFESSIONNEL (Turquoise/Vert clair de l'image) --- */
#btnPro {
  background: #B3E8E8; /* Une couleur turquoise clair proche du visuel */
  color: #0a2a43; /* Couleur de texte bleu foncé */
  /* Retirer le box-shadow pour l'état normal, comme sur l'image */
}

/* --- BOUTON ACADÉMIQUE (Gris clair de l'image) --- */
#btnAca {
  background: #E8E8E8; /* Gris très clair */
  color: #0a2a43; /* Couleur de texte bleu foncé */
  /* Retirer le box-shadow pour l'état normal */
}

/* --- EFFET AU SURVOL (Hover) --- */
.buttons button:hover {
  transform: translateY(-1px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère au survol */
}