/* prose.css — Typographie éditoriale globale (fiches produit + articles blog).
 * Pas de scoping Astro pour fonctionner sur set:html. Cible la classe `.prose` partout.
 * Palette : crème + terracotta + brun profond (tokens).
 */

.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-fg);
  max-width: 68ch;
}
.prose > *:first-child { margin-top: 0 !important; }
.prose > *:last-child { margin-bottom: 0; }

/* ── Paragraphes ── */
.prose p {
  margin: 0 0 1.75rem;
}
.prose p + p { margin-top: 0; }

/* Lettrine sur le 1er paragraphe (drop cap) */
.prose > p:first-of-type::first-letter,
.prose > p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 0.85;
  float: left;
  margin: 0.15em 0.7rem 0 0;
  color: var(--color-accent);
  padding: 0.25rem 0.5rem;
}

/* Premier paragraphe après chaque H2 = lead style (légèrement plus gros) */
.prose h2 + p {
  font-size: 1.125rem;
  color: var(--color-fg);
  line-height: 1.65;
}

/* ── Titres ── */
.prose h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  margin: 4rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-accent-soft);
  position: relative;
}
.prose h2::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 4rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: 9999px;
}

/* h3 = section principale (WordAir génère ###). Style fort, coloré. */
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--color-accent);
  margin: 3.5rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-accent-soft);
  position: relative;
  line-height: 1.2;
}
.prose h3::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 3rem;
  height: 4px;
  background: var(--color-accent);
  border-radius: 9999px;
}

/* Premier paragraphe après h3 = lead style (légèrement plus gros et coloré) */
.prose h3 + p {
  font-size: 1.125rem;
  color: var(--color-fg);
  line-height: 1.65;
}

.prose h4 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  margin: 2.5rem 0 1rem;
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.3;
}
.prose h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  border-radius: 9999px;
  transform: translateY(-50%);
}

/* ── Mise en avant inline ── */
.prose strong { color: var(--color-fg); font-weight: 700; }
.prose em { color: var(--color-fg); font-style: italic; }
.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.prose a:hover { color: var(--color-accent-hover); }

/* ── Listes : sous forme de bloc visuel ── */
.prose ul,
.prose ol {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.5rem 1.25rem 2.5rem;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 0.75rem 0.75rem 0;
  list-style-position: outside;
}
.prose ul li,
.prose ol li {
  margin-bottom: 0.625rem;
  line-height: 1.65;
  padding-left: 0.25rem;
}
.prose ul li:last-child,
.prose ol li:last-child { margin-bottom: 0; }
.prose ul li::marker { color: var(--color-accent); }
.prose ol li::marker { color: var(--color-accent); font-weight: 700; }

/* Listes imbriquées : background plus subtil */
.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol {
  margin: 0.625rem 0 0;
  padding: 0.625rem 1rem 0.625rem 1.5rem;
  background: transparent;
  border-left: 2px solid var(--color-border);
  border-radius: 0;
}

/* ── Blockquote : carte éditoriale ── */
.prose blockquote {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--color-accent-light);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 1rem 1rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--color-fg);
  position: relative;
}
.prose blockquote::before {
  content: '“';
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.35;
  font-style: normal;
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: 0.75rem; }

/* ── Séparateur ── */
.prose hr {
  border: none;
  margin: 3.5rem auto;
  height: 6px;
  width: 5rem;
  background:
    radial-gradient(circle, var(--color-accent) 2px, transparent 2.5px) 0 50% / 12px 6px repeat-x;
}

/* ── Médias ── */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 2.5rem 0;
  box-shadow: 0 20px 40px -20px rgba(42, 36, 32, 0.25);
}
.prose figure { margin: 2.5rem 0; }
.prose figure img { margin: 0; }
.prose figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
  text-align: center;
  font-style: italic;
}

/* ── Tables ── */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  font-size: 0.9375rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 0.75rem;
  overflow: hidden;
}
.prose th, .prose td {
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}
.prose th {
  background: var(--color-bg-alt);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
}
.prose tr:last-child td { border-bottom: none; }

/* ── Code ── */
.prose code {
  background: var(--color-bg-alt);
  padding: 0.15em 0.45em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: var(--font-mono);
  color: var(--color-fg);
  border: 1px solid var(--color-border-light);
}
.prose pre {
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 1.25rem 1.5rem;
  border-radius: 0.875rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 2.5rem 0;
  box-shadow: 0 20px 40px -20px rgba(42, 36, 32, 0.25);
}
.prose pre code {
  background: transparent;
  padding: 0;
  border: none;
  color: inherit;
  font-size: inherit;
}

/* ── Première lettre désactivée si pas pertinent (HTML fragments) ── */
.prose.no-dropcap > p:first-of-type::first-letter,
.prose.no-dropcap > p:first-child::first-letter {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  float: none;
  margin: 0;
  color: inherit;
  padding: 0;
}

/* ── Mobile : ajustements ── */
@media (max-width: 640px) {
  .prose { font-size: 1rem; line-height: 1.7; }
  .prose h2 { font-size: 1.625rem; margin-top: 3rem; }
  .prose h3 { font-size: 1.25rem; margin-top: 2.25rem; }
  .prose > p:first-of-type::first-letter,
  .prose > p:first-child::first-letter { font-size: 3.25rem; }
  .prose ul, .prose ol { padding: 1rem 1rem 1rem 2rem; }
  .prose blockquote { padding: 1.25rem 1.5rem; font-size: 1.0625rem; }
}