/* 1. Transformer la balise personnalisée en élément visuel */
fileicon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 2. Créer l'icône de fichier en pur CSS (avant le texte) */
fileicon::before {
  content: '';
  width: 16px;
  height: 20px;
  background-color: #94a3b8; /* Couleur par défaut */
  border-radius: 2px;
  display: inline-block;
  position: relative;
}

/* 3. Afficher automatiquement le texte contenu dans l'attribut "filename" */
fileicon::after {
  content: attr(filename);
}

/* ==========================================
   4. COULEURS PAR EXTENSION (Sélecteurs CSS)
   ========================================== */
fileicon[filename$=".o"],
fileicon[filename$=".c"],
fileicon[filename$=".cpp"] {
  border-color: #c7d2fe;
}
fileicon[filename$=".o"]::before,
fileicon[filename$=".c"]::before { 
  background-color: #6366f1; /* Violet pour le C/Objet */
}

fileicon[filename$=".js"]::before { 
  background-color: #eab308; /* Jaune pour JS */
}

fileicon[filename$=".png"]::before,
fileicon[filename$=".jpg"]::before { 
  background-color: #10b981; /* Vert pour les images */
}

fileicon[filename$=".zip"]::before { 
  background-color: #f59e0b; /* Orange pour les archives */
}