/* Compléments à Tailwind — garder minimal. */

.gauge-track { background: rgb(226 232 240); border-radius: 9999px; height: 10px; overflow: hidden; }
.gauge-fill { height: 100%; transition: width .5s ease, background-color .3s ease; }

.spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(79, 70, 229, .2);
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgb(15 23 42); color: white; padding: 10px 18px; border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none; transition: opacity .3s;
  z-index: 60;
}
.toast.show { opacity: 1; }

textarea { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }

.badge-rel { background: #eef2ff; color: #4338ca; }
.badge-op  { background: #ecfeff; color: #0e7490; }

/* Cartes pliables via <details> */
details.card summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary .chevron {
  transition: transform .2s ease;
  color: rgb(148 163 184);
}
details.card[open] summary .chevron { transform: rotate(90deg); }
details.card summary:hover .chevron { color: rgb(71 85 105); }