/* ===================================================================
   🎨 WIKI THEME - E:/WIKI
   Palette par thème pour embellir le wiki dans Obsidian
   À installer dans : .obsidian/snippets/wiki-theme.css
   Puis activer dans : Paramètres > Apparence > Extraits CSS
   =================================================================== */

/* 🎨 Variables globales */
.theme-dark {
  --color-ia: #7dd3fc;          /* cyan */
  --color-security: #fca5a5;    /* rouge doux */
  --color-autohost: #86efac;    /* vert */
  --color-web: #fdba74;         /* orange */
  --color-business: #c4b5fd;    /* violet */
  --color-pratique: #fcd34d;    /* jaune */
}

/* Tags colorés (méthode simple, via tags YAML) */
.tag[href="#ia"],
.tag[href="#IA"] {
  color: var(--color-ia);
  background-color: rgba(125, 211, 252, 0.1);
}

.tag[href="#security"],
.tag[href="#security"],
.tag[href="#Security"] {
  color: var(--color-security);
  background-color: rgba(252, 165, 165, 0.1);
}

.tag[href="#auto-hébergement"],
.tag[href="#auto-hebergement"] {
  color: var(--color-autohost);
  background-color: rgba(134, 239, 172, 0.1);
}

.tag[href="#web"] {
  color: var(--color-web);
  background-color: rgba(253, 186, 116, 0.1);
}

/* 🎯 Titres avec couleurs thématiques (basé sur les emojis) */
h1 {
  border-bottom: 3px solid var(--text-accent);
  padding-bottom: 0.3em;
  font-weight: 700;
}

/* Liens internes (couleur par défaut accentuée) */
.internal-link {
  color: var(--text-accent);
  text-decoration: none;
  background-color: rgba(var(--text-accent-rgb), 0.05);
  padding: 0 4px;
  border-radius: 3px;
  transition: background-color 0.2s;
}
.internal-link:hover {
  background-color: rgba(var(--text-accent-rgb), 0.15);
  text-decoration: underline;
}

/* 📋 Styliser les callouts/checklists */
.callout {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 📊 Tableaux comparatifs - style moderne */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 0.95em;
}
table th {
  background-color: var(--background-secondary);
  color: var(--text-accent);
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid var(--text-accent);
}
table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--background-modifier-border);
}
table tr:hover {
  background-color: var(--background-secondary);
}

/* 🎯 Code blocks - lisibilité améliorée */
code {
  background-color: var(--background-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
pre code {
  background-color: var(--background-primary-alt);
  display: block;
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid var(--text-accent);
}

/* ✨ Animation douce sur les titres de section */
h2, h3, h4 {
  transition: color 0.2s;
}
h2:hover, h3:hover, h4:hover {
  color: var(--text-accent);
}

/* 📜 Section "Liens" stylisée */
h2:has(+ ul) {
  /* les sections de liens */
}