@charset "UTF-8";
/* === Variables === */
/* Définir les couleurs et styles réutilisables dans tout le code */
/* Couleur de fond sombre */
/* Couleur du texte clair */
/* Couleur de fond des cartes */
/* Couleur de l'ombre violette */
/* Début du dégradé */
/* Fin du dégradé */
/* === Général === */
body {
  background-color: #121212; /* Appliquer la couleur de fond sombre */
  color: #ffffff; /* Couleur du texte */
  font-family: "Comfortaa", sans-serif; /* Police de caractères */
  line-height: 1.6; /* Hauteur de ligne */
  min-height: 100vh; /* Hauteur minimale pour occuper tout l'écran */
  display: flex; /* Utiliser un layout flex */
  flex-direction: column; /* Disposition des enfants en colonne */
  align-items: center; /* Centrer les éléments horizontalement */
  padding: 24px; /* Espacement autour du contenu */
}

h1 {
  background: linear-gradient(90deg, #7c4dff, #0056b3); /* Dégradé horizontal */
  -webkit-background-clip: text; /* Appliquer le dégradé au texte uniquement */
  -webkit-text-fill-color: transparent; /* Rendre le fond transparent */
  font-size: 2.5rem; /* Taille de police pour le titre principal */
  margin-bottom: 2rem; /* Espacement en bas */
  text-align: center; /* Centrer le texte */
}

/* === Cartes === */
.card {
  border-radius: 15px; /* Coins arrondis */
  transition: transform 0.3s ease; /* Transition fluide pour l'effet de hover */
  padding: 20px; /* Espacement interne */
  text-align: center; /* Centrer le contenu de la carte */
  background-color: #1c1c1c; /* Couleur de fond de la carte */
  color: #ffffff; /* Couleur du texte */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre légère autour de la carte */
}
.card:hover {
  transform: scale(1.05); /* Agrandir légèrement la carte au survol */
  box-shadow: 0 8px 12px rgba(138, 43, 226, 0.8); /* Ombre plus prononcée au survol */
}
.card h2 {
  font-size: 1.5rem; /* Taille de police du titre dans la carte */
  margin-bottom: 1rem; /* Espacement en bas */
}
.card p {
  font-size: 1rem; /* Taille de police des paragraphes dans la carte */
}

/* === Menu déroulant === */
select {
  box-shadow: 0 4px 6px rgba(138, 43, 226, 0.8); /* Ombre autour du menu */
  transition: box-shadow 0.3s ease; /* Transition fluide pour l'effet de hover */
  padding: 10px; /* Espacement interne */
  font-size: 1rem; /* Taille de police */
  border-radius: 8px; /* Coins arrondis */
  margin: 10px 0; /* Espacement vertical */
  background-color: #1c1c1c; /* Couleur de fond du menu */
  color: #ffffff; /* Couleur du texte */
}
select:hover {
  box-shadow: 0 8px 12px rgba(138, 43, 226, 0.8); /* Ombre plus prononcée au survol */
}

/* === Media Queries === */
/* === Petits écrans (mobile) === */
@media (max-width: 767px) {
  h1 {
    font-size: 2rem; /* Taille réduite pour les titres */
    margin-bottom: 1.5rem; /* Moins d'espacement en bas */
  }
  .card {
    padding: 15px; /* Réduire l'espacement interne pour les cartes */
  }
  .card h2 {
    font-size: 1.3rem; /* Taille réduite des titres dans les cartes */
  }
  .card p {
    font-size: 0.9rem; /* Taille réduite des paragraphes */
  }
  select {
    font-size: 0.9rem; /* Taille réduite pour le texte dans le menu */
    padding: 8px; /* Espacement interne réduit */
  }
}
/* === Écrans moyens (tablettes) === */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: 2.2rem; /* Taille légèrement augmentée par rapport aux mobiles */
  }
  .card {
    padding: 18px; /* Espacement légèrement augmenté */
  }
  .card h2 {
    font-size: 1.4rem; /* Taille intermédiaire des titres */
  }
  .card p {
    font-size: 1rem; /* Taille normale pour les paragraphes */
  }
  select {
    font-size: 1rem; /* Taille normale pour le texte dans le menu */
    padding: 10px; /* Espacement interne normal */
  }
}
/* === Grands écrans (ordinateurs) === */
@media (min-width: 1024px) {
  h1 {
    font-size: 2.5rem; /* Taille normale pour les titres */
  }
  .card {
    padding: 20px; /* Espacement interne par défaut */
  }
  .card h2 {
    font-size: 1.5rem; /* Taille normale des titres */
  }
  .card p {
    font-size: 1rem; /* Taille normale des paragraphes */
  }
  select {
    font-size: 1rem; /* Taille normale pour le texte dans le menu */
    padding: 10px; /* Espacement interne par défaut */
  }
}/*# sourceMappingURL=main.css.map */