/* ==========================================================================
   1. SURCHARGE DES VARIABLES NATIVES DE BOOTSTRAP 5 (PURE CSS)
   ========================================================================== */
:root {
  /* --- Typographie --- */
  --bs-font-sans-serif: "IBM Plex Sans", system-ui, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: #f2f0ee;
  --bs-body-bg: transparent;

  /* --- Mappage de la Palette Terminal sur Bootstrap --- */
  --bs-primary: #8ae234;         /* Vert terminal */
  --bs-primary-rgb: 138, 226, 52;

  --bs-secondary: #b8a8c0;       /* Muted / Gris violet */
  --bs-secondary-rgb: 184, 168, 192;

  --bs-success: #8ae234;
  --bs-success-rgb: 138, 226, 52;

  --bs-info: #34e2e2;            /* Cyan info */
  --bs-info-rgb: 52, 226, 226;

  --bs-warning: #fce94f;         /* Jaune warning */
  --bs-warning-rgb: 252, 233, 79;

  --bs-danger: #ef4747;          /* Rouge alert */
  --bs-danger-rgb: 239, 71, 71;

  --bs-dark: #241a29;            /* Chrome / Fond sombre */
  --bs-dark-rgb: 36, 26, 41;

  --bs-light: #f2f0ee;
  --bs-light-rgb: 242, 240, 238;

  /* --- Liens par défaut, Focus et Bordures Bootstrap --- */
  --bs-link-color: #34e2e2;
  --bs-link-hover-color: #fce94f;
  --bs-border-color: #4e2a45;
  --bs-focus-ring-color: rgba(252, 233, 79, 0.4);

  /* --- Variables Internes du Thème Terminal --- */
  --term-bg:        #300a24;
  --term-bg-alt:    #3b0e2c;
  --term-chrome:    #241a29;
  --term-border:    #4e2a45;
  --term-text:      #f2f0ee;
  --term-muted:     #b8a8c0;
  --term-green:     #8ae234;
  --term-cyan:      #34e2e2;
  --term-yellow:    #fce94f;
  --term-red:       #ef4747;
  --term-pink:      #ff79c6;
}

/* ==========================================================================
   2. ADAPTATION DES COMPOSANTS DE BASE BOOTSTRAP
   ========================================================================== */
* { box-sizing: border-box; }

body {
  background: radial-gradient(ellipse at top, #1c0916 0%, #0e0510 70%);
  color: var(--term-text);
  font-family: var(--bs-body-font-family);
  min-height: 100vh;
  padding: 24px 12px 60px;
}

/* --- Style de base des liens --- */
a {
  color: var(--bs-link-color);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

a:hover, a:focus {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* --- Support des classes utilitaires de liens Bootstrap (.link-*) --- */
.link-primary { color: var(--bs-primary) !important; }
.link-primary:hover, .link-primary:focus { color: #6eb52a !important; }

.link-secondary { color: var(--bs-secondary) !important; }
.link-secondary:hover, .link-secondary:focus { color: #93809d !important; }

.link-success { color: var(--bs-success) !important; }
.link-success:hover, .link-success:focus { color: #6eb52a !important; }

.link-info { color: var(--bs-info) !important; }
.link-info:hover, .link-info:focus { color: #20b5b5 !important; }

.link-warning { color: var(--bs-warning) !important; }
.link-warning:hover, .link-warning:focus { color: #caba35 !important; }

.link-danger { color: var(--bs-danger) !important; }
.link-danger:hover, .link-danger:focus { color: #bf3939 !important; }

.link-light { color: var(--bs-light) !important; }
.link-light:hover, .link-light:focus { color: #c2c0be !important; }

.link-dark { color: var(--bs-dark) !important; }
.link-dark:hover, .link-dark:focus { color: #120d15 !important; }

/* --- Typographie globale des Titres --- */
h1, .h1 { color: var(--term-text) !important; }
h2, .h2 { color: var(--term-yellow) !important; }
h3, .h3 { color: var(--term-cyan) !important; }
h4, .h4 { color: var(--term-green) !important; }
h5, .h5, h6, .h6 { color: var(--term-muted) !important; }

h1, h2, h3, h4, code, pre, .nav, .meta {
  font-family: var(--bs-font-monospace);
}

/* --- Boutons Bootstrap --- */
.btn {
  font-family: inherit;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--term-green);
  --bs-btn-border-color: var(--term-green);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #76cb2a;
  --bs-btn-hover-border-color: #76cb2a;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #67b322;
  --bs-btn-active-border-color: #67b322;
  --bs-btn-focus-shadow-rgb: 138, 226, 52;
}

.btn-outline-primary {
  --bs-btn-color: var(--term-green);
  --bs-btn-border-color: var(--term-green);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--term-green);
  --bs-btn-hover-border-color: var(--term-green);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--term-green);
  --bs-btn-active-border-color: var(--term-green);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--term-red);
  --bs-btn-border-color: var(--term-red);
  --bs-btn-hover-bg: #d63838;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--term-yellow);
  --bs-btn-border-color: var(--term-yellow);
}

/* --- Badges Bootstrap --- */
.badge {
  font-family: inherit;
  font-weight: 500;
  border-radius: 4px;
}

.badge.bg-primary {
  background-color: var(--term-green) !important;
  color: #000 !important;
}

/* --- Alertes Bootstrap --- */
.alert {
  background-color: var(--term-chrome);
  border: 1px solid var(--term-border);
  color: var(--term-text);
  border-radius: 6px;
}

.alert-primary { border-left: 4px solid var(--term-green); }
.alert-warning { border-left: 4px solid var(--term-yellow); }
.alert-danger  { border-left: 4px solid var(--term-red); }
.alert-info    { border-left: 4px solid var(--term-cyan); }

/* --- Cartes & Modales Bootstrap --- */
.card, .modal-content {
  background-color: var(--term-bg);
  border: 1px solid var(--term-border);
  color: var(--term-text);
  border-radius: 8px;
}

.card-header, .modal-header, .modal-footer {
  background-color: var(--term-chrome);
  border-color: var(--term-border);
}

/* --- Formulaires Bootstrap --- */
.form-control, .form-select {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--term-border);
  color: var(--term-text);
  font-family: inherit;
}

.form-control:focus, .form-select:focus {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: var(--term-yellow);
  color: var(--term-text);
  box-shadow: 0 0 0 0.25rem rgba(252, 233, 79, 0.25);
}

.form-control::placeholder {
  color: var(--term-muted);
}

/* ==========================================================================
   TOOLTIPS BOOTSTRAP (STYLE TERMINAL)
   ========================================================================== */
.tooltip {
  --bs-tooltip-bg: var(--term-chrome);
  --bs-tooltip-color: var(--term-cyan);
  --bs-tooltip-opacity: 1;
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
}

.tooltip-inner {
  border: 1px solid var(--term-border);
  border-radius: 4px;
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  max-width: 250px;
}

.tooltip-arrow {
  display: none !important;
}

/* ==========================================================================
   3. STYLES DU TEMPLATE TERMINAL
   ========================================================================== */
.terminal-window {
  max-width: 980px;
  margin: 0 auto;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03);
}

.titlebar {
  background: var(--term-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--term-border);
}

.titlebar-dots { display: flex; gap: 8px; }
.titlebar-dots span {
  width: 12px; height: 12px;
  border-radius: 50%; display: inline-block;
}

.dot-close { background: var(--term-red); }
.dot-min   { background: var(--term-yellow); }
.dot-max   { background: var(--term-green); }

.titlebar-label {
  font-size: .8rem;
  color: var(--term-muted);
  letter-spacing: .03em;
}
.titlebar-spacer { width: 52px; }

.tab-bar {
  display: flex;
  background: var(--term-chrome);
  padding: 0 10px;
  border-bottom: 1px solid var(--term-border);
  overflow-x: auto;
}

.tab-bar .nav-link {
  color: var(--term-muted);
  font-size: .85rem;
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-top: 6px;
  white-space: nowrap;
}

.tab-bar .nav-link::before {
  content: "❯ ";
  color: var(--term-green);
}

.tab-bar .nav-link:hover {
  color: var(--term-text);
  background: rgba(255, 255, 255, .04);
  text-decoration: none;
}

.tab-bar .nav-link.active {
  color: var(--term-text);
  background: var(--term-bg);
  border-color: var(--term-border);
  font-weight: 700;
}

.terminal-body {
  padding: 28px clamp(16px, 4vw, 48px) 40px;
}

.prompt {
  color: var(--term-green);
  font-weight: 700;
}
.prompt .path { color: var(--term-cyan); }
.prompt .sym  { color: var(--term-text); }

.lead-command {
  font-size: .95rem;
  color: var(--term-muted);
  margin-bottom: 4px;
}

h1.banner {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  margin: 6px 0 2px;
  color: var(--term-text);
}

.banner-sub {
  color: var(--term-muted);
  font-size: .9rem;
  margin-bottom: 28px;
}

.cursor {
  display: inline-block;
  width: .55em;
  height: 1.1em;
  background: var(--term-green);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.breadcrumb-path {
  font-size: .82rem;
  color: var(--term-muted);
  margin-bottom: 4px;
}
.breadcrumb-path a { color: var(--term-cyan); }
.breadcrumb-path .sep { color: var(--term-border); margin: 0 4px; }
.breadcrumb-path .current { color: var(--term-text); }

.article-header, .article-line {
  border: 1px solid var(--term-border);
  border-left: 3px solid var(--term-green);
  background: rgba(255, 255, 255, .02);
  border-radius: 6px;
  padding: 20px 22px;
  margin-bottom: 28px;
  transition: background .15s ease, border-color .15s ease;
}

.article-line {
  padding: 16px 18px;
  margin-bottom: 16px;
}

.article-line:hover {
  background: rgba(255, 255, 255, .05);
  border-left-color: var(--term-yellow);
}

.article-meta {
  font-size: .78rem;
  color: var(--term-muted);
  margin-bottom: 10px;
}
.article-meta .tag { color: var(--term-cyan); }

.article-title {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--term-text);
  margin: 0 0 10px;
  line-height: 1.3;
}

.article-line .article-title {
  font-size: 1.05rem;
  margin: 4px 0 6px;
}

.article-title a { color: inherit; }
.article-title a:hover { color: var(--term-yellow); }

.article-sub, .article-excerpt {
  font-size: .92rem;
  color: var(--term-muted);
  margin: 0;
}
.article-excerpt { font-size: .88rem; }

/* ==========================================================================
   4. CONTENU MARKDOWN ARTICLE
   ========================================================================== */
.article-content {
  font-size: .95rem;
  line-height: 1.75;
}

.article-content p, .article-content ul, .article-content ol {
  color: var(--term-text);
  margin-bottom: 1.25rem;
  line-height: 1.65;
}

.article-content ul, .article-content ol { padding-left: 1.4rem; }
.article-content li { margin-bottom: 6px; }
.article-content li::marker { color: var(--term-green); }

/* Blockquotes */
article blockquote {
  border-left: 3px solid var(--term-cyan);
  padding: 12px 18px;
  margin: 1.5rem 0;
  background: rgba(255, 255, 255, 0.03);
  color: var(--term-text);
  font-size: 0.9rem;
  border-radius: 0 6px 6px 0;
}

/* Code inline (`variable`, `commande`) */
article p code,
article li code,
article blockquote code {
  color: var(--term-yellow) !important;
  background-color: var(--term-chrome) !important;
  border: 1px solid var(--term-border);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: var(--bs-font-monospace);
}

/* Titres H2 : Jaune terminal + plus petit + dièses + pointillé */
h2, article h2, .article-content h2 {
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--term-yellow) !important;
  margin: 28px 0 14px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px dotted var(--term-border) !important;
  font-family: var(--bs-font-monospace) !important;
}

/* Titres H3 : Cyan terminal + plus petit + dièses */
h3, article h3, .article-content h3 {
  font-size: 0.95rem !important;
  font-weight: 700;
  color: var(--term-cyan) !important;
  margin: 20px 0 10px !important;
  font-family: var(--bs-font-monospace) !important;
}

/* Titres H4 : Vert terminal + taille proportionnelle*/
h4, article h4, .article-content h4 {
  font-size: 0.875rem !important;
  font-weight: 700;
  color: var(--term-green) !important;
  margin: 16px 0 8px !important;
  font-family: var(--bs-font-monospace) !important;
}

/* ==========================================================================
   GESTION DES IMAGES DANS LES ARTICLES (RESPONSIVE & TERMINAL)
   ========================================================================== */
.article-content img,
article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border: 1px solid var(--term-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   5. BLOCS DE CODE HUGO (.code-wrapper & .highlight)
   ========================================================================== */
.code-wrapper {
  background-color: var(--term-chrome);
  border: 1px solid var(--term-border);
  border-radius: 6px;
  margin: 1.5rem 0;
  overflow: hidden;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 0.4rem 0.8rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.82rem;
  color: var(--term-muted);
  border-bottom: 1px solid var(--term-border);
}

.code-title {
  color: var(--term-yellow);
  font-weight: 600;
}

.code-lang {
  color: var(--term-muted);
  text-transform: lowercase;
}

.code-wrapper .highlight {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.highlight pre {
  margin: 0 !important;
  padding: 0.85rem 1rem !important;
  font-family: var(--bs-font-monospace) !important;
  font-size: 0.875rem !important;
  background-color: transparent !important;
  overflow-x: auto;
}

.highlight table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 !important;
}

.highlight table td {
  padding: 0 !important;
  border: none !important;
}

.highlight table td:first-child {
  width: 2.5rem;
  user-select: none;
  opacity: 0.4;
  text-align: right;
  padding-right: 0.75rem !important;
  border-right: 1px solid var(--term-border) !important;
}

.highlight table td:last-child {
  padding-left: 0.75rem !important;
}

/* ==========================================================================
   6. CATEGORIES & GRILLES
   ========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.category-card {
  display: block;
  border: 1px solid var(--term-border);
  border-left: 3px solid var(--term-cyan);
  background: rgba(255, 255, 255, .02);
  border-radius: 6px;
  padding: 16px 18px;
  color: var(--term-text);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.category-card:hover, .category-card:focus-visible {
  background: rgba(255, 255, 255, .05);
  border-left-color: var(--term-yellow);
  text-decoration: none;
  transform: translateX(2px);
}

.category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.category-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--term-text);
}

.category-count {
  font-size: .75rem;
  color: var(--term-bg);
  background: var(--term-green);
  border-radius: 10px;
  padding: 2px 9px;
  font-weight: 700;
  white-space: nowrap;
}

.category-desc {
  font-size: .82rem;
  color: var(--term-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

.category-meta {
  font-size: .74rem;
  color: var(--term-muted);
}
.category-meta .tag { color: var(--term-cyan); }

.card-title a {
  color: var(--term-green);
  text-decoration: none;
}

.card-title a:hover,
.card-title a:focus {
  color: var(--term-yellow);
  text-decoration: none;
}

/* ==========================================================================
   7. NAVIGATION & FOOTER
   ========================================================================== */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0;
}

.article-tags .badge {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--term-border);
  color: var(--term-cyan);
  font-weight: 400;
  font-size: .78rem;
  padding: 6px 10px;
}

.article-nav {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--term-border);
  padding-top: 20px;
  margin-top: 12px;
}

.article-nav .nav-block {
  flex: 1 1 0;
  border: 1px solid var(--term-border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: .82rem;
}

.article-nav .nav-block .label {
  color: var(--term-muted);
  display: block;
  margin-bottom: 4px;
}

.article-nav .nav-block a {
  color: var(--term-text);
  font-weight: 700;
}

.article-nav .nav-block a:hover { color: var(--term-yellow); }
.article-nav .next { text-align: right; }

.pagination {
  --bs-pagination-color: var(--term-green);
  --bs-pagination-bg: var(--term-chrome);
  --bs-pagination-border-color: var(--term-border);
  --bs-pagination-hover-color: var(--term-yellow);
  --bs-pagination-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-pagination-hover-border-color: var(--term-border);
  --bs-pagination-focus-color: var(--term-yellow);
  --bs-pagination-focus-bg: rgba(255, 255, 255, 0.06);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(252, 233, 79, 0.25);
  --bs-pagination-active-color: var(--term-bg);
  --bs-pagination-active-bg: var(--term-green);
  --bs-pagination-active-border-color: var(--term-green);
  --bs-pagination-disabled-color: var(--term-muted);
  --bs-pagination-disabled-bg: rgba(0, 0, 0, 0.25);
  --bs-pagination-disabled-border-color: var(--term-border);
  gap: 2px;
}

.page-link {
  font-family: inherit;
  font-size: .88rem;
  border-radius: 4px !important;
}

.page-item.active .page-link {
  font-weight: 700;
}

footer.terminal-footer {
  border-top: 1px solid var(--term-border);
  padding: 16px clamp(16px, 4vw, 48px);
  font-size: .78rem;
  color: var(--term-muted);
  background: var(--term-chrome);
}

.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--term-green); color: #000; padding: 8px 12px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

.nav-link:focus-visible, a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--term-yellow);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; opacity: 1; }
  .category-card { transition: none; }
}

/* ==========================================================================
   RÉDUCTIONS DU TITRE PRINCIPAL DANS L'EN-TÊTE D'ARTICLE
   ========================================================================== */
.article-header .article-title,
.article-header h1,
.post-header-card h1 {
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  font-weight: 700;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   RÉDUCTION DE LA DESCRIPTION DANS L'EN-TÊTE D'ARTICLE
   ========================================================================== */
.article-header .article-sub,
.article-header .article-excerpt,
.article-header p,
.post-header-card p {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  color: var(--term-muted) !important;
}

.text-justify-center {
  text-align: justify;
  text-align-last: center;
}


/* ==========================================================================
   POPOVER BOOTSTRAP (STYLE TERMINAL)
   ========================================================================== */
.custom-popover {
  --bs-popover-bg: var(--term-bg);
  --bs-popover-max-width: 280px;
  --bs-popover-border-color: var(--term-border);
  --bs-popover-header-bg: var(--term-chrome);
  --bs-popover-header-color: var(--term-green);
  --bs-popover-body-color: var(--term-text);
  --bs-popover-header-padding-x: 0.75rem;
  --bs-popover-header-padding-y: 0.35rem; /* Padding réduit en hauteur */
  --bs-popover-body-padding-x: 0.75rem;
  --bs-popover-body-padding-y: 0.5rem;
  --bs-popover-border-radius: 6px;
  
  font-family: var(--bs-font-monospace);
  font-size: 0.85rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

/* En-tête compacté */
.custom-popover .popover-header {
  margin: 0 !important;
  padding: 0.35rem 0.75rem !important;
  line-height: 1.2;
  font-family: var(--bs-font-monospace);
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom: 1px solid var(--term-border);
}

.custom-popover .popover-header::before {
  content: "❯ ";
  color: var(--term-yellow);
}

.custom-popover .popover-body a {
  color: var(--term-cyan);
}

.custom-popover .popover-body a:hover {
  color: var(--term-yellow);
}

/* Ventilation des listes d'expériences en 2 colonnes sur grand écran */
/* .article-content ul {
  column-width: 280px;
  column-gap: 1.5rem;
  padding-left: 1.2rem;
}

.article-content li {
  break-inside: avoid;
  margin-bottom: 0.4rem;
} */

/* Fil conducteur continu sur le conteneur global */
@media (min-width: 768px) {
  .timeline-container {
    position: relative;
  }

  /* Ligne verticale continue en tirets verts */
  .timeline-container::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 33.333333%; /* Se cale exactement à la jonction col-md-4 et col-md-8 */
    border-left: 2px dashed var(--term-green);
    z-index: 1;
  }

  /* Puce chevron calée sur la ligne */
  .timeline-chevron {
    position: absolute;
    top: 10px;
    left: -11px;
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
    z-index: 2;
  }
}

/* Curseur clignotant */
.typing-cursor {
    display: inline-block;
    font-weight: bold;
    color: #8ae234; /* Vert terminal */
    animation: blink 0.6s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Animation fluide à 60 FPS de la barre de progression */
.skill-card .progress-bar {
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}