/* ==========================================================================
   CARTES, BADGES, PASTILLES, AVATARS
   ==========================================================================
   Les briques d'affichage réutilisées partout : carte de projet, badge de
   statut, pastille de compteur, avatar à initiales.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Carte générique
   -------------------------------------------------------------------------- */
.carte {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.carte--compacte {
  padding: var(--space-4);
}

.carte__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.carte__titre {
  font-size: var(--text-lg);
  margin-right: auto;
}

.carte__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   2. Carte de projet (cliquable en entier)
   -------------------------------------------------------------------------- */
.carte-projet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition);
}

/* Au survol, la bordure se renforce. Pas d'ombre qui grandit : le brief
   demande des bordures fines plutôt que des ombres lourdes. */
.carte-projet:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-2);
  color: inherit;
}

.carte-projet__entete {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.carte-projet__nom {
  font-size: var(--text-lg);
  margin-right: auto;
}

.carte-projet__description {
  color: var(--text-muted);
  font-size: var(--text-sm);
  /* Trois lignes au maximum, pour que toutes les cartes aient la même
     hauteur dans la grille. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte-projet__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.carte-projet__info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Un projet archivé est volontairement plus discret. */
.carte-projet--archive {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   3. Badge de statut
   --------------------------------------------------------------------------
   Chaque couleur a un sens fixe, jamais décoratif :
     idée      -> neutre
     en cours  -> info
     en test   -> attention
     lancé     -> succès
     archivé   -> neutre atténué
     résolu    -> succès
     ouverte   -> attention
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.badge .icone {
  width: 12px;
  height: 12px;
}

.badge--neutre {
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}

.badge--info {
  background-color: var(--info-soft);
  color: var(--info);
}

.badge--attention {
  background-color: var(--warning-soft);
  color: var(--warning);
}

.badge--succes {
  background-color: var(--success-soft);
  color: var(--success);
}

.badge--danger {
  background-color: var(--danger-soft);
  color: var(--danger);
}

.badge--accent {
  background-color: var(--accent-soft);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   4. Pastille de compteur
   --------------------------------------------------------------------------
   Un nombre dans un petit cercle : questions ouvertes, messages non lus.
   -------------------------------------------------------------------------- */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums; /* les chiffres gardent la même largeur */
  line-height: 1;
}

.pastille--accent {
  background-color: var(--accent);
  color: var(--on-accent);
}

.pastille--attention {
  background-color: var(--warning-soft);
  color: var(--warning);
}

/* Point simple, sans nombre : « il y a du nouveau ». */
.point {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  flex: none;
}

/* --------------------------------------------------------------------------
   5. Avatar à initiales
   --------------------------------------------------------------------------
   La teinte est déduite du nom de la personne (filtre teinte_avatar) :
   toujours la même couleur pour la même personne, sur toutes les pages.
   -------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  user-select: none;
}

.avatar--grand {
  width: 40px;
  height: 40px;
  font-size: var(--text-sm);
}

.avatar--petit {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.avatar--t1 { background-color: var(--avatar-1-bg); color: var(--avatar-1-text); }
.avatar--t2 { background-color: var(--avatar-2-bg); color: var(--avatar-2-text); }
.avatar--t3 { background-color: var(--avatar-3-bg); color: var(--avatar-3-text); }
.avatar--t4 { background-color: var(--avatar-4-bg); color: var(--avatar-4-text); }
.avatar--t5 { background-color: var(--avatar-5-bg); color: var(--avatar-5-text); }
.avatar--t6 { background-color: var(--avatar-6-bg); color: var(--avatar-6-text); }
.avatar--t7 { background-color: var(--avatar-7-bg); color: var(--avatar-7-text); }
.avatar--t8 { background-color: var(--avatar-8-bg); color: var(--avatar-8-text); }

/* --------------------------------------------------------------------------
   6. État vide
   --------------------------------------------------------------------------
   Jamais une zone blanche : une icône, une phrase utile, une action.
   -------------------------------------------------------------------------- */
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  background-color: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.etat-vide__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--surface-2);
  color: var(--text-subtle);
}

.etat-vide__icone .icone {
  width: 24px;
  height: 24px;
}

.etat-vide__titre {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.etat-vide__texte {
  max-width: 44ch;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. Personne, et liste de personnes
   --------------------------------------------------------------------------
   Utilisées sur la page des accès d'un projet. Le nom est lisible, l'adresse
   e-mail est plus discrète en dessous : c'est elle qui lève le doute entre
   deux homonymes, mais ce n'est pas elle qu'on lit en premier.
   -------------------------------------------------------------------------- */
.personne {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.personne__textes {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.personne__nom {
  font-weight: var(--weight-medium);
}

.personne__email {
  font-size: var(--text-sm);
  color: var(--text-muted);
  /* Une adresse trop longue est coupée par des points de suspension plutôt
     que d'élargir la carte au-delà de l'écran. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liste-personnes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-personnes__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

/* La dernière ligne ne porte pas de trait : la bordure de la carte suffit. */
.liste-personnes__ligne:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.liste-personnes__ligne:first-child {
  padding-top: 0;
}