/* ==========================================================================
   pmsisoft-docs — feuille de style unique
   Une seule échelle de taille (--fs-base) partagée par la sidebar et le
   contenu, pour une cohérence typographique de bout en bout.
   ========================================================================== */

:root {
    --fs-base: 16px;
    --fs-sm: 14px;
    --fs-lg: 18px;

    --doc-topbar-height: 60px;
    --doc-sidebar-width: 280px;
    /* Élargie (760px → 900px) pour réduire l'espace entre le texte et le
       TOC, qui reste par ailleurs aligné sur le bord droit de la barre
       du haut (voir .doc-content-with-toc). */
    --doc-content-max: 900px;
    /* Taille des titres de page (h1 de .doc-page-title). */
    --doc-heading-size: 2rem;
    /* Taille des entrées de 1er niveau de la sidebar : volontairement
       plus petite que --doc-heading-size, qui s'est révélée bien trop
       imposante dans une colonne de 280px. */
    --doc-nav-heading-size: 1.125rem;

    --doc-bg: #ffffff;
    --doc-sidebar-bg: #f5f6f7;
    --doc-input-bg: #f4f5f7;
    --doc-border: #e4e7ec;
    --doc-text: #1f2933;
    --doc-muted: #6b7280;
    --doc-accent: #2563eb;
    --doc-accent-bg: rgba(37, 99, 235, 0.08);
    --doc-code-bg: #f4f5f7;

    /* Champ PMSI — 4 valeurs fixes, palette Okabe-Ito (colorblind-safe),
       reprise telle quelle du thème pmsi-annuaire. */
    --champ-mco: #E69F00; --champ-mco-bg: rgba(230, 159, 0, 0.16);
    --champ-smr: #009E73; --champ-smr-bg: rgba(0, 158, 115, 0.14);
    --champ-psy: #CC79A7; --champ-psy-bg: rgba(204, 121, 167, 0.16);
    --champ-had: #0072B2; --champ-had-bg: rgba(0, 114, 178, 0.14);
}

@media (prefers-color-scheme: dark) {
    :root {
        --doc-bg: #14161a;
        --doc-sidebar-bg: #1a1c20;
        --doc-input-bg: #1d2026;
        --doc-border: #2a2d34;
        --doc-text: #e5e7eb;
        --doc-muted: #9aa1ac;
        --doc-accent: #60a5fa;
        --doc-accent-bg: rgba(96, 165, 250, 0.12);
        --doc-code-bg: #1d2026;

        /* Mêmes teintes de marque, fond légèrement plus opaque pour le
           contraste sur fond sombre (repris de pmsi-annuaire). */
        --champ-mco-bg: rgba(230, 159, 0, 0.22);
        --champ-smr-bg: rgba(0, 158, 115, 0.22);
        --champ-psy-bg: rgba(204, 121, 167, 0.22);
        --champ-had-bg: rgba(0, 114, 178, 0.24);
    }
}

* { box-sizing: border-box; }

html { font-size: var(--fs-base); }

body {
    margin: 0;
    background: var(--doc-bg);
    color: var(--doc-text);
    /* Reprend les polices choisies dans Ghost Admin → Design (onglet Fonts),
       injectées via ces variables, avec repli sur une police système. */
    font-family: var(--gh-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.doc-page-title,
.doc-brand {
    font-family: var(--gh-font-heading, inherit);
}

a { color: var(--doc-accent); }

/* ---------------------------------------------------------------------- */
/* Barre du haut : titre à gauche (H1), recherche à droite                 */
/* ---------------------------------------------------------------------- */
.doc-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--doc-topbar-height);
    padding: 0 20px;
    background: var(--doc-bg);
    border-bottom: 1px solid var(--doc-border);
}

.doc-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.doc-brand {
    display: flex;
    align-items: center;
    color: var(--doc-text);
    text-decoration: none;
    white-space: nowrap;
}
.doc-brand img { max-height: 28px; width: auto; }

.doc-brand-title {
    margin: 0;
    font-family: var(--gh-font-heading, inherit);
    font-weight: 700;
    font-size: var(--doc-heading-size);
    line-height: 1;
}

/* Alignée à droite : largeur confortable sans dépendre d'un centrage
   absolu (qui décalait l'icône loupe par rapport au bord de l'input). */
.doc-search {
    position: relative;
    flex: 0 1 420px;
    margin-left: auto;
}

.doc-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--doc-muted);
    pointer-events: none;
}

.doc-search-input {
    width: 100%;
    height: 40px;
    padding: 0 40px;
    border: 1px solid var(--doc-border);
    border-radius: 8px;
    background: var(--doc-input-bg);
    color: var(--doc-text);
    font-size: var(--fs-sm);
    font-family: inherit;
}
.doc-search-input:focus {
    outline: none;
    border-color: var(--doc-accent);
    background: var(--doc-bg);
}
.doc-search-input::placeholder { color: var(--doc-muted); }

.doc-search-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 7px;
    border: 1px solid var(--doc-border);
    border-radius: 5px;
    background: var(--doc-bg);
    color: var(--doc-muted);
    font-size: 12px;
    font-family: inherit;
    pointer-events: none;
}
.doc-search-input:focus ~ .doc-search-kbd { display: none; }

.doc-search-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--doc-bg);
    border: 1px solid var(--doc-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
}

.doc-search-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--doc-text);
    cursor: pointer;
}
.doc-search-result:hover,
.doc-search-result[aria-selected="true"] { background: var(--doc-accent-bg); }

.doc-search-result-title { font-size: var(--fs-sm); font-weight: 600; }
.doc-search-result-group { font-size: 12px; color: var(--doc-muted); }
.doc-search-result-excerpt {
    font-size: 12px;
    color: var(--doc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-search-result-excerpt mark {
    background: var(--doc-accent-bg);
    color: var(--doc-text);
    border-radius: 2px;
    padding: 0 1px;
}

.doc-search-empty {
    padding: 14px 10px;
    color: var(--doc-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.doc-burger { display: none; }

/* ---------------------------------------------------------------------- */
/* Layout à deux colonnes                                                  */
/* ---------------------------------------------------------------------- */
.doc-layout {
    display: flex;
    align-items: flex-start;
}

.doc-main {
    flex: 1;
    min-width: 0;
}

/* ---------------------------------------------------------------------- */
/* TOC flottant ("Sur cette page") : basé sur les H2/H3 de la page,       */
/* uniquement à partir de 1280px, et seulement si au moins 3 titres ont   */
/* été trouvés (voir main.js — sinon .doc-toc reste vide et invisible).   */
/* ---------------------------------------------------------------------- */
.doc-content-with-toc {
    display: flex;
    align-items: flex-start;
    /* Le TOC va jusqu'au même bord droit que la barre du haut (qui a un
       padding de 20px, repris ici), pour une position cohérente d'une
       page à l'autre — plutôt que collé juste après le texte, qui le
       plaçait à un endroit différent selon la largeur de l'écran. Le
       gap agit comme un espacement minimum si jamais le texte s'élargit
       au point de s'en approcher. --doc-content-max (ci-dessus) a été
       élargi pour réduire l'espace vide que ça laisse entre les deux. */
    justify-content: space-between;
    gap: 40px;
    padding-right: 20px;
}

.doc-body {
    /* Ne s'étire pas pour remplir tout l'espace disponible : sa largeur
       colle à celle du texte (.doc-page, limité à --doc-content-max).
       Sans ça, .doc-body prenait toute la largeur restante de .doc-main
       et le TOC — juste après, via le gap de 40px — se retrouvait poussé
       loin à droite du texte réellement lu, avec un grand vide entre les
       deux. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(var(--doc-content-max) + 64px); /* 64px = padding gauche+droite de .doc-page */
}

.doc-toc {
    display: none; /* affiché uniquement si .doc-toc--ready, voir ci-dessous */
}

@media (min-width: 1280px) {
    .doc-toc.doc-toc--ready {
        display: block;
        flex: 0 0 220px;
        position: sticky;
        top: calc(var(--doc-topbar-height) + 32px);
        max-height: calc(100vh - var(--doc-topbar-height) - 64px);
        overflow-y: auto;
        padding-top: 48px; /* aligne visuellement avec le haut du titre de page */
        font-size: 13px;
        line-height: 1.5;
    }
}

.doc-toc-heading {
    margin: 0 0 10px;
    color: var(--doc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.doc-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--doc-border);
}

.doc-toc-list li { margin: 0; }

.doc-toc-list a {
    display: block;
    padding: 4px 0 4px 14px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--doc-muted);
    text-decoration: none;
}
.doc-toc-list a:hover { color: var(--doc-text); }

.doc-toc-list li[data-level="3"] a { padding-left: 26px; }

.doc-toc-list a.is-active {
    border-left-color: var(--doc-accent);
    color: var(--doc-text);
    font-weight: 600;
}

/* Ancre bien positionnée sous la barre du haut (sticky) au clic/scroll */
.doc-page-content h2,
.doc-page-content h3 {
    scroll-margin-top: calc(var(--doc-topbar-height) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.doc-overlay { display: none; }

/* ---------------------------------------------------------------------- */
/* Sidebar : menu fixe à 2 niveaux, 1er niveau en gras                     */
/* ---------------------------------------------------------------------- */
.doc-sidebar {
    position: sticky;
    top: var(--doc-topbar-height);
    flex: 0 0 var(--doc-sidebar-width);
    width: var(--doc-sidebar-width);
    height: calc(100vh - var(--doc-topbar-height));
    overflow-y: auto;
    padding: 24px 16px 32px;
    background: var(--doc-sidebar-bg);
    border-right: 1px solid var(--doc-border);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.doc-nav-list,
.doc-nav-list ul { list-style: none; margin: 0; padding: 0; }
.doc-nav-list li { margin: 0; }

/* Petit espace entre chaque entrée de 1er niveau (pas entre les
   sous-entrées de 2e niveau, qui restent collées). */
.doc-nav-list > li {
    margin-bottom: 6px;
}
.doc-nav-list > li:last-child { margin-bottom: 0; }

/* Niveau 1 : liens directs et titres de groupes, tous en gras.
   Les groupes de 1er niveau (ex. "PMSIsoft") sont toujours dépliés —
   pas de <details>/<summary>, donc pas de repli possible : le libellé
   du groupe est un simple texte non cliquable. */
.doc-nav-list > li > a,
.doc-nav-list > li > .doc-nav-group-label {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--doc-text);
    font-size: var(--doc-nav-heading-size);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.doc-nav-list > li > a { cursor: pointer; }
.doc-nav-list > li > a:hover { background: rgba(127, 127, 127, 0.1); }

/* Niveau 2 : liens normaux (non gras), légèrement en retrait */
.doc-nav-list > li > ul {
    margin: 2px 0 0 10px;
    padding-left: 10px;
    border-left: 1px solid var(--doc-border);
}
.doc-nav-list > li > ul a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--doc-muted);
    font-weight: 400;
    text-decoration: none;
}
.doc-nav-list > li > ul a:hover { color: var(--doc-text); background: rgba(127, 127, 127, 0.1); }

/* Page courante : même fond que le survol, mais qui reste affiché */
.doc-nav-list a[aria-current="page"] {
    background: rgba(127, 127, 127, 0.1);
}
.doc-nav-list > li > ul a[aria-current="page"] {
    color: var(--doc-text);
}

/* ---------------------------------------------------------------------- */
/* Contenu                                                                 */
/* ---------------------------------------------------------------------- */
.doc-page {
    max-width: var(--doc-content-max);
    /* Calé à gauche (pas de centrage automatique) : un petit espace libre
       à gauche, via le padding, sépare le contenu du bord de la sidebar. */
    margin: 0;
    padding: 48px 32px 64px 32px;
}

.doc-page-title {
    margin: 0 0 24px;
    font-size: var(--doc-heading-size);
    font-weight: 700;
    line-height: 1.25;
}

.doc-page-content { font-size: 1rem; }

/* Liens dans le contenu des pages : même famille de couleurs que la
   sidebar (texte / gris), pas d'accent bleu, pas de soulignement — le
   changement de couleur au survol suffit à les distinguer. */
.doc-page-content a {
    color: var(--doc-text);
    text-decoration: none;
}
.doc-page-content a:hover { color: var(--doc-muted); }

.doc-page-content :first-child { margin-top: 0; }

.doc-page-content h2 { font-size: 1.375rem; margin: 2.2em 0 0.6em; }
.doc-page-content h3 { font-size: 1.125rem; margin: 1.8em 0 0.5em; }

.doc-page-content p,
.doc-page-content ul,
.doc-page-content ol { margin: 0 0 1.1em; }

/* Blocs HTML de l'éditeur (.kg-html-card) et autres cards Koenig : sans
   cette règle, ils n'avaient aucun espacement propre et se retrouvaient
   collés au bloc suivant, contrairement aux paragraphes normaux. */
.doc-page-content .kg-card { margin: 0 0 1.1em; }
.doc-page-content .kg-card:last-child { margin-bottom: 0; }

.doc-page-content pre {
    padding: 16px;
    border-radius: 8px;
    background: var(--doc-code-bg);
    overflow-x: auto;
    font-size: var(--fs-sm);
}
.doc-page-content code {
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: var(--doc-code-bg);
    font-size: 0.9em;
}
.doc-page-content pre code { padding: 0; background: none; }

.doc-page-content img { max-width: 100%; height: auto; border-radius: 6px; }

.doc-page-feature-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 0 1.5em;
}

/* Cartes "wide" et "full" de l'éditeur Ghost. La colonne de contenu est
   volontairement étroite pour la lecture (--doc-content-max) ; ces deux
   classes lui font ignorer cette limite pour occuper toute la largeur
   disponible dans .doc-main (donc jusqu'au bord de l'écran, sidebar
   déduite), sans les hacks classiques en 100vw qui ne conviendraient pas
   ici puisque .doc-main ne couvre pas toute la largeur de l'écran. */
.doc-page-content .kg-width-wide,
.doc-page-content .kg-width-full {
    width: calc(100% + 2 * 32px);
    max-width: none;
    margin-left: -32px;
    margin-right: -32px;
}

@media (max-width: 900px) {
    .doc-page-content .kg-width-wide,
    .doc-page-content .kg-width-full {
        width: calc(100% + 2 * 20px);
        margin-left: -20px;
        margin-right: -20px;
    }
}

.doc-page-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    margin: 0 0 1.4em;
}
.doc-page-content th,
.doc-page-content td {
    padding: 8px 10px;
    border: 1px solid var(--doc-border);
    text-align: left;
}

/* Callouts / bookmarks de l'éditeur Ghost : on les garde lisibles */
.kg-callout-card,
.kg-bookmark-card { font-size: var(--fs-sm); }

.doc-home .doc-page-title { display: none; }

.doc-footer {
    /* Pas de max-width ici : le texte se centre sur toute la largeur du
       contenu (sidebar déduite), pas seulement sur la colonne de lecture. */
    margin: 0;
    padding: 24px 32px 48px;
    color: var(--doc-muted);
    font-size: 13px;
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Mobile : sidebar en tiroir                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 900px) {
    .doc-topbar { gap: 12px; padding: 0 12px; }

    /* Sous 900px, la recherche prend tout l'espace restant à côté du
       burger et du titre. */
    .doc-search {
        flex: 1 1 auto;
    }

    .doc-burger {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 36px;
        height: 36px;
        padding: 0 9px;
        border: 1px solid var(--doc-border);
        border-radius: 8px;
        background: var(--doc-bg);
        cursor: pointer;
    }
    .doc-burger span { display: block; height: 2px; background: var(--doc-text); }

    .doc-layout { position: relative; }

    .doc-sidebar {
        position: fixed;
        z-index: 40;
        top: var(--doc-topbar-height);
        bottom: 0;
        left: 0;
        height: auto;
        width: min(80vw, 320px);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
    }
    body.doc-nav-open .doc-sidebar { transform: translateX(0); }

    .doc-overlay {
        display: block;
        position: fixed;
        inset: var(--doc-topbar-height) 0 0 0;
        z-index: 30;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    body.doc-nav-open .doc-overlay { opacity: 1; pointer-events: auto; }

    .doc-page { padding: 32px 20px 48px; }
}

@media (max-width: 560px) {
    .doc-search-kbd { display: none; }
}

/* ===== Lignes de changelog façon goaccess.io ===== */
/* À utiliser dans un bloc HTML de l'éditeur Ghost, par exemple :
   <div class="pmsisoft-changelog-item">
       <div class="pmsisoft-changelog-row">
           <span class="pmsisoft-changelog-badge pmsisoft-changelog-added">Ajout</span>
           <span class="pmsisoft-changelog-text">Mise à jour de la documentation</span>
       </div>
       <p class="pmsisoft-changelog-desc">
           La documentation est maintenant accessible publiquement sur le site.
       </p>
   </div>

   Le paragraphe <p class="pmsisoft-changelog-desc"> est optionnel (1 ou
   2 lignes sous le badge + titre) ; on peut l'omettre pour une ligne
   simple, comme avant.

   Pour signaler l'importance du changement, un 2e badge optionnel
   (intitulé explicite "Majeur" ou "Mineur", pas un symbole ni une
   couleur à interpréter) se place entre le badge de type et le titre,
   toujours dans .pmsisoft-changelog-row. Neutre = rien de plus, on ne
   rajoute pas ce badge :
   <div class="pmsisoft-changelog-row">
       <span class="pmsisoft-changelog-badge pmsisoft-changelog-added">Ajouté</span>
       <span class="pmsisoft-changelog-severity pmsisoft-changelog-severity--major">Majeur</span>
       <span class="pmsisoft-changelog-text">Nouveau filtre par établissement.</span>
   </div>

   IMPORTANT (changement depuis la v1.17.0) : la ligne badge + titre
   doit maintenant être enveloppée dans .pmsisoft-changelog-row, elle
   ne peut plus être posée directement dans .pmsisoft-changelog-item —
   c'est ce qui permet d'ajouter .pmsisoft-changelog-desc en dessous.
   Les blocs déjà écrits avec l'ancienne structure (sans .pmsisoft-
   changelog-row) sont à corriger pour garder le bon alignement.
*/
.pmsisoft-changelog-item {
  padding: 0.5em 0;
}
/* Le padding ci-dessus suffit entre deux lignes de changelog empilées
   dans un même bloc HTML, mais ne "dépasse" jamais du bloc : sans cette
   marge sur le dernier élément, rien ne pousse le paragraphe suivant
   plus loin, d'où l'absence d'espacement après le bloc HTML. */
.pmsisoft-changelog-item:last-child {
  margin-bottom: 1.1em;
}

.pmsisoft-changelog-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1em;
}

.pmsisoft-changelog-badge {
  flex-shrink: 0;
  display: inline-block;
  min-width: 70px;
  text-align: center;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
}

.pmsisoft-changelog-text {
  flex: 1;
  /* Largeur minimale pour ne pas finir écrasé à presque 0 quand le
     badge de type + le badge de sévérité + le titre ne tiennent plus
     sur une seule ligne (voir flex-wrap ci-dessus). */
  min-width: 200px;
  font-weight: 600;
  color: var(--doc-text);
}

/* 1 ou 2 lignes de détail sous le badge + titre, optionnelles. */
.pmsisoft-changelog-desc {
  margin: 0.4em 0 0;
  color: var(--doc-text);
  font-size: 0.95em;
}

/* Couleurs par type de changement */
.pmsisoft-changelog-added     { background: #6cc644; } /* vert */
.pmsisoft-changelog-fixed     { background: #428dc9; } /* bleu */
.pmsisoft-changelog-updated   { background: #9a6700; } /* ambre */
/* Fond clair : texte foncé (au lieu du blanc par défaut) pour rester lisible. */
.pmsisoft-changelog-deprecated { background: #e4e7ec; color: #4b5563; }

/* Importance du changement : intitulé explicite, pas de symbole. La
   couleur n'est qu'un repère secondaire — le texte seul doit suffire. */
.pmsisoft-changelog-severity {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
}

.pmsisoft-changelog-severity--major {
  background: #fcebec;
  color: #dc3545;
}

.pmsisoft-changelog-severity--minor {
  background: var(--doc-code-bg);
  color: var(--doc-muted);
}

/* ===== Callout information (par défaut) ===== */
/* Le callout "information" est le plus utilisé en pratique, donc c'est
   lui la variante par défaut (sans classe modificatrice) ; le callout
   d'avertissement devient l'exception, avec --warning.
   À utiliser dans un bloc HTML de l'éditeur Ghost, par exemple :
   <div class="pmsisoft-callout">
       <div class="pmsisoft-callout-title">Information</div>
       <div class="pmsisoft-callout-body">
           <p>Texte du callout.</p>
       </div>
   </div>
   Couleurs reprises du callout bleu natif de l'éditeur Ghost
   (#21ace8 / sa version pâle).
*/
.pmsisoft-callout {
  border-left: 4px solid #21ace8;
  border-radius: 4px;
  margin: 1.5em 0;
}

.pmsisoft-callout-title {
  font-weight: 700;
  background: #e4f5fc;
  padding: 0.6em 1.2em;
}

.pmsisoft-callout-body {
  padding: 1em 1.2em;
}

.pmsisoft-callout-body p:last-child {
  margin-bottom: 0;
}

/* ===== Callout avertissement ===== */
/* Même structure, avec la classe modificatrice --warning. Écart de
   clarté entre bordure et fond de titre identique à celui du callout
   information (voir CHANGELOG, v1.15.0).
   <div class="pmsisoft-callout pmsisoft-callout--warning">
       <div class="pmsisoft-callout-title">Attention</div>
       <div class="pmsisoft-callout-body">
           <p>Texte du callout.</p>
       </div>
   </div>
*/
.pmsisoft-callout--warning {
  border-left-color: #dc3545;
}

.pmsisoft-callout--warning .pmsisoft-callout-title {
  background: #fcebec;
}

/* ===== Badges "champ PMSI" (MCO / SMR / PSY / HAD) ===== */
/* Repris du thème pmsi-annuaire (mêmes couleurs, palette Okabe-Ito,
   lisible même en cas de daltonisme). Indépendants des autres badges du
   thème : à poser un peu partout dans le contenu, seuls ou juste avant
   un autre badge (ex. un badge de changelog).

   C'est un <span>, pensé pour s'insérer dans une phrase sans casser
   l'espacement du paragraphe autour — il ne porte donc pas de marge.
   Utilisé seul (tout le contenu d'un bloc HTML), il faut l'entourer
   d'un <p> pour qu'il profite de la marge basse des paragraphes,
   sinon rien ne pousse le bloc suivant plus loin :
   <p><span class="pmsisoft-champ-badge pmsisoft-champ-badge--mco">MCO</span></p>

   Dans une phrase, pas de <p> à ajouter (celui du texte suffit) :
   <p>Fonctionnalité réservée au champ <span class="pmsisoft-champ-badge pmsisoft-champ-badge--mco">MCO</span>.</p>

   <div class="pmsisoft-changelog-item">
       <div class="pmsisoft-changelog-row">
           <span class="pmsisoft-champ-badge pmsisoft-champ-badge--smr">SMR</span>
           <span class="pmsisoft-changelog-badge pmsisoft-changelog-added">Ajout</span>
           <span class="pmsisoft-changelog-text">Nouveau filtre de cohorte</span>
       </div>
   </div>
*/
.pmsisoft-champ-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.75em;
  font-weight: 700;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pmsisoft-champ-badge--mco { background: var(--champ-mco-bg); color: var(--champ-mco); }
.pmsisoft-champ-badge--smr { background: var(--champ-smr-bg); color: var(--champ-smr); }
.pmsisoft-champ-badge--psy { background: var(--champ-psy-bg); color: var(--champ-psy); }
.pmsisoft-champ-badge--had { background: var(--champ-had-bg); color: var(--champ-had); }