/* Def de éléments, en raccourcis */
:root {
  --bg: #f5f6fa;
  --card-bg: #ffffff;
  --text-dark: #1e2535;
  --text-muted: #7f8c8d;
  --primary: #FFA500;
  --radius: 16px;
}

/* Structure commune pour toute la page liée */
body {
  margin: 0;
  background: var(--bg);
  font-family: "Inter", sans-serif;
  /* Police d'écriture */
  color: #1e2535;
}

/*div contenant tout le carnet d'adresse, ici on fixe ces dimenssions*/
.container {
  max-width: 1100px;
  /* largeur max */
  margin: auto;
  /* Marge automatique */
}

/*mise en forme pour le titre principal*/
h1 {
  margin-bottom: 20px;
  /* Espace en bas */
  margin-top: 40px;
  /* Espace en haut */
}


/*paramètre pour la barre de recherche, lié au fichier js*/
#searchInput {
  width: 100%;
  /* Largeur à 100% */
  padding: 12px;
  /* espace intérieur de l'élément, entre le contenu et la bordure */
  border-radius: var(--radius);
  /* bord arrondis, fait appel au root du début */
  border: 1px solid #dcdde1;
  /* bordure */
  margin-bottom: 20px;
  /* espace en bas */
  font-size: 16px;
  /* taille du texte */
  margin-top: 40px;
  /* espace en haut */
}

/*div de paramètre pour l'ensemble des filtres*/
.filter-panel {
  display: flex;
  gap: 24px;
  /* espace entre chaque type de filtre entreprise, en dessous entreprise privée ..... */
  background: var(--card-bg);
  /* couleur de fond fait appel au root */
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  /* espace en bas */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  /* ombres */
}

/*paramètre pour les titres h3 de sections des filtres*/
.filter-group h3 {
  margin-top: 0;
  /* espace en haut */
  font-size: 17px;
  /* taille des titres */
  color: #1e2535;
  /* couleur des titres */
}

/*paramètre pour le texte des filtres*/
.filter-group label {
  display: block;
  /* Transforme un élément en élément “bloc”.
Un élément bloc occupe toute la largeur disponible de son parent.
Il commence toujours sur une nouvelle ligne et pousse les autres éléments en dessous */
  font-size: 14px;
  /* taille du texte */
  margin-bottom: 6px;
  /* espace en bas */
}

/*supprime tout les filtres + recherches faites*/
#resetBtn {
  margin-left: 50%;
  /* espace a gauche */
  margin-top: 3%;
  /* espae en heut */
  padding: 10px 16px;
  background: var(--primary);
  color: white;
  border: none;
  /* pas de bordure */
  border-radius: var(--radius);
  cursor: pointer;
  /* type de curseur pour la souris au passage sur l'élement */
  width: 100px;
  /* largeur */
  height: 100px;
  /* hauteur */
}

/* Cards */
/*div commune à toutes les vignettes*/
.cards {
  display: grid;
  /* Transforme un élément en conteneur grille (grid container).
Ses enfants deviennent des “grid items”.
Permet de placer les éléments en lignes et colonnes très facilement. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Def type de grid */
  gap: 20px;
  /* espaces entre les éléments */
}

/*paramètre de la vignette contact*/
.card {
  display: flex;
  gap: 16px;
  /* espace entre les différentes vignettes */
  background: var(--card-bg);
  padding: 16px;
  /* espace intérieur de l'élément */
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform .2s;
  /* animation au passage de la souris, vignette bouge/gonfle un peu */
  border-top: 4px solid #FFA500;
  /* bordure du haut, taille, type et couleur */
}

/*animation au passage de la souris sur la vigentte contact*/
.card:hover {
  transform: translateY(-4px);
}

/*paramètre pour les rond jaune avec innitiales des contacts*/
.avatar {
  width: 64px;
  /* larheur */
  height: 64px;
  /* hauteur */
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  background: var(--primary);
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  /* centre l'élément intérieur */
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  /* épaisseur du texte */
  overflow: hidden;
  /* empêche le contenu de déborder */
}

/*paramètre pour le nom et prénom du contact*/
.info .title {
  font-size: 18px;
  /* taille du titre */
  font-weight: 700;
  /* épaisseur du texte */
  color: #FFA500;
}

/*paramètre pour le nom de la structure*/
.info .subtitle {
  color: var(--text-muted);
  margin-bottom: 8px;
  /* espace en bas */
}

/*mise en forme du texte des infos pour les vignettes*/
.details p {
  margin: 2px 0;
  font-size: 13px;
  color: var(--text-muted);
}

/*définit l'espace sous le titre h3*/
h3 {
  margin-bottom: 20px;
}


/* Help en bas à droite */
.help-container {
  position: absolute;
  right: 3%;
  /* colle le bloc au bord droit du parent */
  top: 4%;
  /* distance depuis le haut */
}

/* Petit bouton rond d'aide */
.help-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFA500;
  color: white;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: help;
  /* ? a cote du curseur au passage de la souris du l'élément i, affichant les noms des stagiaires */
}

/* La fenêtre qui apparaît au survol */
.help-popup {
  display: none;
  position: absolute;
  top: 40px;
  /* juste en dessous du bouton */
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  z-index: 9999;
  /* passe au-dessus de tout */
  white-space: nowrap;
  /* empêche le retour à la ligne */
}

/* Affichage au survol du bouton OU du conteneur */
.help-container:hover .help-popup {
  display: block;
}

.help-container ul {
  margin: 0;
  /* enlève la marge par défaut */
  padding: 0;
  /* enlève l'indentation à gauche */
  list-style: none;
  /* enlève les puces des listes*/
}

.help-container li {
  margin-left: 10%;
  margin-top: 2%;
  margin-bottom: 8px;
  /* espace entre chaque élément */
  font-size: 16px;
  list-style: none;
}