/* Marges */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Grid */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Textes */
.text-center { text-align: center; }
.text-muted { color: var(--text-mute); }
.text-ink { color: var(--ink); }
.text-blue { color: var(--blue); }
.text-orange { color: var(--orange); }

/* Tailles */
.w-full { width: 100%; }
.max-w-md { max-width: 500px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1200px; }

/* Animations */
@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade { animation: fade 0.4s ease; }
.animate-fade-in { animation: fadeIn 0.35s ease; }

/* Transitions */
.transition { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }

/* Bordures */
.border { border: 1px solid var(--border); }
.border-radius { border-radius: 8px; }
.border-radius-lg { border-radius: 12px; }

/* Espacements */
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* Affichage */
.hidden { display: none; }
.block { display: block; }

/* Positionnement */
.relative { position: relative; }
.absolute { position: absolute; }

/* Curseur */
.cursor-pointer { cursor: pointer; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Responsive */
@media (max-width: 900px) {
  .md\:grid-cols-2 { grid-template-columns: 1fr; }
  .md\:gap-4 { gap: 1rem; }
}

@media (max-width: 560px) {
  .sm\:flex-col { flex-direction: column; }
  .sm\:text-center { text-align: center; }
}