/* =============================================================================
   SKILLS.CSS – 🧠 Compétences techniques
   Harmonisé le 2025-07-04 (DRY + palette)
   -----------------------------------------------------------------------------
   • Doublons retirés : .big-block, .progress, .progress-bar, @keyframes fadeInUp
     (désormais centralisés dans big-block.css, progress.css, animation.css).
   • Palette unifiée : var(--accent), var(--primary), var(--text-color) / var(--text-light).
   • Progress : on s’appuie sur les styles globaux ; seules les hauteurs sont
     surchargées via .skills-progress.
   ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
   1 · WRAPPER PRINCIPAL
   ------------------------------------------------------------------------ */
.skills-wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem 2rem 3rem;
}

/* ---------------------------------------------------------------------------
   2 · LISTE DES COMPÉTENCES
   ------------------------------------------------------------------------ */
.list-group-item {
  background: transparent;
  border: none;
  padding: 1rem 0;
  border-radius: 8px;
  transition: background .3s ease;
}

.list-group-item:hover { background: rgb(0 0 0 / .05); }
html.dark .list-group-item:hover { background: rgb(255 255 255 / .05); }

/* Icônes */
.skill-icon { font-size: 1.8rem; line-height: 1; }
@media (max-width: 576px) { .skill-icon { font-size: 1.4rem; } }

/* Label */
.list-group-item strong {
  font-size: 1.1rem;
  font-weight: 600;
  display: inline-block;
  color: var(--text-light);
  transition: color .3s ease;
}
html.dark .list-group-item strong { color: #fff; }
@media (max-width: 576px) { .list-group-item strong { font-size: 1rem; } }

/* ---------------------------------------------------------------------------
   3 · PROGRESS BAR (réutilise progress.css)
   ------------------------------------------------------------------------ */
.skills-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}

.skills-progress .progress { height: 10px; flex-grow: 1; }

.skills-progress .progress-label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-light);
  min-width: 38px;
  text-align: right;
}
html.dark .skills-progress .progress-label { color: #ccc; }
@media (max-width: 576px) { .skills-progress .progress-label { font-size: .75rem; } }

/* ---------------------------------------------------------------------------
   4 · ANIMATION (déjà définie globalement) – simple cascade
   ------------------------------------------------------------------------ */
.fade-in-up:nth-child(n) { animation-delay: calc(.1s * (var(--n, 1))); }

/* ---------------------------------------------------------------------------
   5 · COMPÉTENCES HUMAINES & LINGUISTIQUES
   ------------------------------------------------------------------------ */
.skills-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.skill-block {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgb(0 0 0 / .05);
}
html.dark .skill-block { background: #1e1e2f; }

.skill-block h3 {
  font-size: 1.2rem;
  margin-bottom: .75rem;

  text-align: center;
}

.skill-badges {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.skill-badges li {
  background: var(--badge-bg, #e0e0e0);
  color: var(--text-color);
  border-radius: 20px;
  padding: .4rem 1rem;
  font-size: .95rem;
  font-weight: 500;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   6 · VARIANTES DE BADGES (Soft, Mad, Langues)
   ------------------------------------------------------------------------ */

/* SOFT SKILLS */
/* -- SOFT SKILLS -- */
html.light .bg-skill-soft {
  background-color: #30D5C8;
  color: white;
}
html.dark .bg-skill-soft {
  background-color: #303F9F;
  color: #E8EAF6;
}

/* -- MAD SKILLS -- */
html.light .bg-skill-mad {
  background-color: #004D61;
  color: white;
}
html.dark .bg-skill-mad {
   background-color: #d7263d !important;
  color: white;
}

html.light .bg-lang-fr {
  background-color: #880E4F !important;
  color: #FCE4EC !important;
}
html.dark .bg-lang-fr {
  background-color: #880E4F !important;
  color: #FCE4EC !important;
}

html.light .bg-lang-en {
  background-color: #0D47A1 !important;
  color: white !important;
}
html.dark .bg-lang-en {
  background-color: #1565C0 !important;
  color: #E3F2FD !important;
}


/* -- THAÏ -- */
html.light .bg-lang-th {
  background-color: #7E57C2; 
  color: white !important;
}
html.dark .bg-lang-th {
  background-color: #26A69A !important;
  color: white !important;
}