/* ============================================================================
 * Le Média du Faso — Styles personnalisés (complément à Tailwind)
 * Seulement ce que Tailwind ne couvre pas nativement (animation marquee, etc.)
 * ==========================================================================*/

/* Limitation du nombre de lignes (fallback si plugin line-clamp absent) */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Bandeau "Flash info" défilant */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.animate-marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 28s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

/* Liens de navigation principale (desktop) */
#main-nav a {
  display: block;
  padding: 0.75rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s ease;
}
#main-nav a:hover,
#main-nav a.is-active { background: rgba(0, 0, 0, .18); }

/* Liens de navigation mobile */
#mobile-nav a {
  display: block;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-weight: 600;
}

/* Confort de lecture du corps d'article */
.article-body p { margin-bottom: 1.1rem; line-height: 1.8; }
.article-body p:first-of-type::first-letter {
  font-size: 1px; /* neutralise toute lettrine indésirable */
}

/* Respecte la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none; padding-left: 0; }
  * { scroll-behavior: auto !important; }
}