/* ============================================================================
   HappyLinking — prose.css
   Mise en forme des contenus rédigés en éditeur riche.

   -- LE BUG QU'ELLE CORRIGE --
   style.css (thème du site public) ligne 122 :
       ul, li, ol { margin:0; padding:0; list-style:none; }
   article.php restaure bien l'indentation (.art-body ul { padding-left:1.4rem })
   mais jamais list-style. Résultat : listes indentées, sans puces ni numéros.
   Et l'aperçu du brouillon, qui n'a aucun style de contenu, perd les deux.

   -- COMMENT ELLE EST FAITE --
   Elle cible .art-body ET .hl-prose, à égalité de spécificité avec les règles
   déjà présentes dans le <style> d'article.php. Comme ce <style> est déclaré
   après le <link>, il l'emporte sur les propriétés qu'il déclare : le design
   existant d'article.php n'est pas modifié. prose.css ne fournit que ce qui
   manquait — à commencer par list-style.

   -- OÙ LA CHARGER --
     article.php       ? rendu publié      (conteneur .art-body, déjà en place)
     admin_header.php  ? aperçu brouillon  (conteneur .hl-prose, déjà en place)
   ========================================================================= */

/* -- LISTES : le correctif principal ----------------------------------- */
.hl-prose ul,
.art-body ul {
    list-style: disc;
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}
.hl-prose ol,
.art-body ol {
    list-style: decimal;
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}
.hl-prose li,
.art-body li {
    list-style: inherit;
    line-height: 1.8;
    margin-bottom: .4rem;
    font-size: .97rem;
    /* pas de `color` ici : la puce reprend la couleur du <li>, donc celle
       que l'auteur a appliquée dans l'éditeur. */
}
/* Imbrication : un repère visuel différent par niveau */
.hl-prose ul ul,     .art-body ul ul     { list-style: circle; }
.hl-prose ul ul ul,  .art-body ul ul ul  { list-style: square; }
.hl-prose ol ol,     .art-body ol ol     { list-style: lower-alpha; }
.hl-prose ol ol ol,  .art-body ol ol ol  { list-style: lower-roman; }
.hl-prose li > ul,   .art-body li > ul,
.hl-prose li > ol,   .art-body li > ol   { margin: .4rem 0 .2rem; }

/* -- PARAGRAPHES ------------------------------------------------------- */
/* style.css impose p { margin:20px; font-weight:300 } : les paragraphes sont
   décalés de 20px des deux côtés et en graisse fine. */
.hl-prose p,
.art-body p {
    margin: 0 0 1rem;
    font-weight: 400;
    font-size: .97rem;
    line-height: 1.82;
}
.hl-prose > *:last-child,
.art-body > *:last-child { margin-bottom: 0; }

/* -- TITRES ------------------------------------------------------------ */
.hl-prose h2,
.art-body h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.3rem; font-weight: 700; color: #1a1a1a;
    margin: 2rem 0 .8rem;
    padding: 0 0 8px;
    border-bottom: 2px solid #fff3ee;
}
.hl-prose h3,
.art-body h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem; font-weight: 700; color: #1a1a1a;
    margin: 1.5rem 0 .6rem;
    padding: 0;
}
/* h4 : non couvert par article.php, TinyMCE peut en produire */
.hl-prose h4,
.art-body h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .97rem; font-weight: 700; color: #1a1a1a;
    margin: 1.2rem 0 .5rem;
    padding: 0;
}
.hl-prose h2:first-child, .art-body h2:first-child,
.hl-prose h3:first-child, .art-body h3:first-child { margin-top: 0; }

/* -- ENRICHISSEMENTS --------------------------------------------------- */
/* `font-weight` seul : déclarer une couleur ici écraserait celle d'un
   <span style="color:…"> qui envelopperait le gras. */
.hl-prose strong, .art-body strong,
.hl-prose b,      .art-body b      { font-weight: 700; }
.hl-prose em,     .art-body em,
.hl-prose i,      .art-body i      { font-style: italic; }
.hl-prose u,      .art-body u      { text-decoration: underline; }
.hl-prose s,      .art-body s      { text-decoration: line-through; }

.hl-prose a,      .art-body a      { color: #f76d37; }
.hl-prose a:hover,.art-body a:hover{ color: #d45520; }

/* -- ÉLÉMENTS NON COUVERTS PAR article.php ----------------------------- */
/* TinyMCE peut produire tout ceci ; sans styles, le rendu partait à la dérive. */

.hl-prose blockquote,
.art-body blockquote {
    margin: 1.4rem 0;
    padding: .2rem 0 .2rem 1.1rem;
    border-left: 4px solid #f76d37;
    color: #4b5563;
    font-style: italic;
}
.hl-prose blockquote p:last-child,
.art-body blockquote p:last-child { margin-bottom: 0; }

.hl-prose hr, .art-body hr {
    border: 0; border-top: 1px solid #e5e7eb; margin: 2rem 0;
}

/* Sans max-width, une image collée dans l'éditeur déborde de la colonne */
.hl-prose img, .art-body img {
    max-width: 100%; height: auto;
    border-radius: 8px; margin: 1.2rem 0;
}
.hl-prose figure, .art-body figure { margin: 1.4rem 0; }
.hl-prose figcaption, .art-body figcaption {
    font-size: .82rem; color: #9ca3af; text-align: center; margin-top: .5rem;
}

.hl-prose table, .art-body table {
    width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .92rem;
}
.hl-prose th, .art-body th,
.hl-prose td, .art-body td {
    border: 1px solid #e5e7eb; padding: 9px 12px;
    text-align: left; vertical-align: top;
}
.hl-prose th, .art-body th { background: #f8f9fa; font-weight: 700; color: #1a1a1a; }

.hl-prose code, .art-body code {
    background: #f3f4f6; border-radius: 4px; padding: .12em .4em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
}
.hl-prose pre, .art-body pre {
    background: #1f2937; color: #e5e7eb; border-radius: 8px;
    padding: 16px; overflow-x: auto; margin: 1.4rem 0;
}
.hl-prose pre code, .art-body pre code { background: none; padding: 0; color: inherit; }

/* -- MOBILE ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .hl-prose ul, .art-body ul,
    .hl-prose ol, .art-body ol { padding-left: 1.25rem; }

    .hl-prose h2, .art-body h2 { font-size: 1.16rem; }
    .hl-prose h3, .art-body h3 { font-size: 1rem; }

    /* un tableau large reste scrollable plutôt que de casser la colonne */
    .hl-prose table, .art-body table { display: block; overflow-x: auto; }
}