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

/* --- Prose (contenu markdown) --- */
.prose { max-width: 65ch; }
.prose > h1:first-child { display: none; }
.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;
}

/* --- Tables premium --- */
.prose table { border-collapse: collapse; width: 100%; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.prose thead { background: #1c1917; }
.prose th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  border: none;
}
.prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e7e5e4;
  text-align: left;
  font-size: 0.875rem;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover { background: #fafaf9; }

/* --- Table responsive --- */
.prose table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Images prose --- */
.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; }

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

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

/* --- Reading progress bar --- */
#reading-progress {
  will-change: width;
  pointer-events: none;
}

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

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