/* ==========================================================================
   SudBed — Typographie des articles du Mag (single mag_pro / mag_part)
   Chargé uniquement sur les articles du Mag.

   Le build Tailwind (dist/output.css) applique un "preflight" qui remet les
   titres et listes à plat (taille/graisse/marges héritées), et les classes
   `prose` (Tailwind Typography) ne sont pas compilées dans le build.
   Ce fichier restaure une typographie éditoriale lisible pour le contenu
   rédigé dans l'éditeur WordPress.
   ========================================================================== */

.prose {
  color: #3b4566;
  font-size: 1.07rem;
  line-height: 1.75;
}

/* --- Paragraphes --- */
.prose p {
  margin: 0 0 1.35em;
}

/* --- Titres de section --- */
.prose h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.55rem, 1rem + 1.8vw, 2.05rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #3F3F3F;
  padding-bottom: .45rem;
  border-bottom: 2px solid #e6e9ef;
}

.prose h3 {
  margin: 2.1rem 0 .6rem;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  color: #009ABF;
}

.prose h4 {
  margin: 1.7rem 0 .5rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: #3F3F3F;
}

/* Premier titre du contenu : pas de marge haute superflue */
.prose > h2:first-child,
.prose > h3:first-child {
  margin-top: 0;
}

/* --- Listes --- */
.prose ul,
.prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .35em 0; }
.prose li::marker { color: #009ABF; }
.prose li > ul,
.prose li > ol { margin: .35em 0; }

/* --- Liens --- */
.prose a {
  color: #009ABF;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.prose a:hover { color: #007a9a; }

/* --- Emphase --- */
.prose strong,
.prose b { font-weight: 700; color: #3F3F3F; }
.prose em,
.prose i { font-style: italic; }

/* --- Citations --- */
.prose blockquote {
  margin: 1.8rem 0;
  padding: .4rem 0 .4rem 1.25rem;
  border-left: 3px solid #009ABF;
  color: #3b4566;
  font-style: italic;
}

/* --- Médias --- */
.prose img {
  height: auto;
  border-radius: 14px;
}
.prose figure { margin: 1.8rem 0; }
.prose figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: #6b7280;
  text-align: center;
}

/* --- Séparateur --- */
.prose hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid #e6e9ef;
}

/* --- Tableaux --- */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: .98rem;
}
.prose th,
.prose td {
  padding: .6rem .8rem;
  border: 1px solid #e6e9ef;
  text-align: left;
}
.prose th {
  background: #f7f7f8;
  font-weight: 700;
  color: #3F3F3F;
}

/* ==========================================================================
   Mode sombre
   ========================================================================== */
html.dark .prose { color: #dde3ef; }
html.dark .prose h2,
html.dark .prose h4 { color: #ffffff; border-color: rgba(255, 255, 255, .14); }
html.dark .prose h3 { color: #4ec6e7; }
html.dark .prose strong,
html.dark .prose b { color: #ffffff; }
html.dark .prose a { color: #4ec6e7; }
html.dark .prose blockquote { color: #c6cad3; }
html.dark .prose th { background: rgba(255, 255, 255, .05); color: #ffffff; }
html.dark .prose th,
html.dark .prose td { border-color: rgba(255, 255, 255, .12); }
html.dark .prose hr { border-color: rgba(255, 255, 255, .12); }