/* ---------- Styles personnalisés pour le design moderne ---------- */

/* Animations fluides */
* {
  transition: all 0.2s ease-in-out;
}

/* Effet de glassmorphism pour la navbar */
header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Amélioration des boutons */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

.btn-secondary {
  @apply bg-white hover:bg-gray-50 text-blue-600 font-semibold px-6 py-3 rounded-lg border-2 border-blue-600 transition-all duration-300 transform hover:scale-105;
}

/* Effet de hover pour les cartes */
.card-hover {
  @apply transition-all duration-300 transform hover:scale-105 hover:shadow-2xl;
}

/* Gradient personnalisé */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Animation de fade-in */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

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

/* Amélioration des icônes */
.icon-container {
  @apply w-16 h-16 mx-auto bg-gradient-to-br from-blue-100 to-blue-200 rounded-2xl flex items-center justify-center group-hover:from-blue-200 group-hover:to-blue-300 transition-all duration-300;
}

/* Styles pour les sections */
.section-padding {
  @apply py-16 md:py-20 lg:py-24;
}

/* Amélioration des ombres */
.shadow-modern {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ---------- Rendu Markdown / pages "contenu" ---------- */
.content-markdown {
  /* largeur lisible + centrage */
  max-width: 72ch;
  margin: 0 auto;
  /* typo un peu plus grande et aérée */
  font-size: 1.0625rem; /* ~17px */
  line-height: 1.8;
}

/* paragraphes & espacements */
.content-markdown p { margin: 0.75rem 0; }
.content-markdown ul,
.content-markdown ol { margin: 0.75rem 0 0.75rem 1.25rem; }
.content-markdown li { margin: 0.25rem 0; }

/* titres internes */
.content-markdown h2,
.content-markdown h3 { margin-top: 1.25rem; margin-bottom: 0.5rem; }

/* images fluides */
.content-markdown img { max-width: 100%; height: auto; display: block; margin: 1rem auto; }

/* citations / code (si tu en mets plus tard) */
.content-markdown blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; color: #374151; }
.content-markdown pre { overflow: auto; padding: 0.75rem; background: #111827; color: #e5e7eb; border-radius: 0.375rem; }