/* ============================================================
   Les Attelages de Loubezac — Styles custom
   TailwindCSS est chargé via CDN dans head.html
   ============================================================ */

/* --- Prose (contenu markdown) --- */
.prose { max-width: 65ch; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p  { margin-bottom: 1.25rem; }
.prose ul, .prose ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote {
  border-left-width: 3px;
  padding-left: 1.25rem;
  margin: 2rem 0;
}
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid #e7e5e4;
  text-align: left;
}
.prose img { border-radius: 0.75rem; }

/* --- Line clamp --- */
.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;
}

/* --- Details/Summary (FAQ) --- */
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }
details[open] summary { border-bottom: 1px solid #e7e5e4; }

/* --- Accessibilité --- */
a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Scroll --- */
html { scroll-behavior: smooth; }

/* --- Animations subtiles --- */
@media (prefers-reduced-motion: no-preference) {
  .transition-transform { will-change: transform; }
}

/* --- Print --- */
@media print {
  header, footer, nav, .no-print { display: none !important; }
  .prose { max-width: 100%; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #888; }
}