/* ==========================================================================
   Pro Re Nata — Composants partagés (Sprint 1, 2026-05-01)
   ==========================================================================
   Patterns extraits de la consultation voyage pour propagation aux autres
   modules. Préfixe `prn-` pour éviter les collisions avec `v-` (voyage).

   À inclure APRÈS style.css et AVANT le CSS spécifique au module :
       <link rel="stylesheet" href="css/style.css">
       <link rel="stylesheet" href="css/components.css">
       <link rel="stylesheet" href="css/oxyures.css">

   Composants fournis :
   - Badges de risque WCAG 4 niveaux (.prn-risk-badge, .prn-risk-dot)
   - Chips 3 états (.prn-chip, .is-active, .is-ci)
   - Callouts (.prn-callout-warn / -danger / -info / -success)
   - Action bar collante (.prn-actions-sticky)
   - Tags PIQ (.prn-piq-tag.is-free / .is-paid)
   - Section patient card (.prn-pat-card)
   ========================================================================== */

/* ==========================================================================
   1. Badges de risque WCAG (4 niveaux)
   --------------------------------------------------------------------------
   Usage :
   <span class="prn-risk-badge" data-level="modéré">
     <span class="prn-risk-dot"></span>Modéré
   </span>

   Le data-level pilote la couleur via les variables --prn-risk-*.
   Niveaux supportés : "nul" | "faible" | "modéré" | "élevé"
   ========================================================================== */
.prn-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--risk-color, var(--prn-risk-none));
    background: color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 12%, white);
    border: 1px solid color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 35%, white);
}

.prn-risk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--risk-color, var(--prn-risk-none));
    display: inline-block;
    flex-shrink: 0;
}

/* Mapping niveau → couleur (pilote --risk-color via attribut) */
.prn-risk-badge[data-level="nul"]    { --risk-color: var(--prn-risk-none); }
.prn-risk-badge[data-level="faible"] { --risk-color: var(--prn-risk-low); }
.prn-risk-badge[data-level="modéré"] { --risk-color: var(--prn-risk-mod); }
.prn-risk-badge[data-level="élevé"]  { --risk-color: var(--prn-risk-high); }

/* Dark mode : color-mix avec la surface plutôt que white. Le texte est aussi
   éclairci (mix 45 % blanc) : --risk-color peut arriver inline en palette
   600-900 pensée pour fond clair (ex. getRiskColor du module voyage). */
[data-theme="dark"] .prn-risk-badge {
    background: color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 18%, var(--prn-surface));
    border-color: color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 50%, var(--prn-surface));
    color: color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 45%, white);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .prn-risk-badge {
        background: color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 18%, var(--prn-surface));
        border-color: color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 50%, var(--prn-surface));
        color: color-mix(in srgb, var(--risk-color, var(--prn-risk-none)) 45%, white);
    }
}

/* ==========================================================================
   2. Chips (3 états : normal / sélectionné / contre-indiqué)
   --------------------------------------------------------------------------
   Usage :
   <button class="prn-chip">Option</button>
   <button class="prn-chip is-active">Sélectionné</button>
   <button class="prn-chip is-ci" disabled title="Contre-indiqué">Bloqué</button>
   ========================================================================== */
.prn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border: 1.5px solid var(--prn-line);
    border-radius: 999px;
    background: var(--prn-surface);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--prn-ink);
    transition: border-color var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
    user-select: none;
}

.prn-chip:hover:not(.is-ci):not(:disabled) {
    border-color: var(--prn-int-hover-border);
    background: var(--prn-int-hover-bg);
}

.prn-chip:focus-visible {
    outline: 2px solid var(--prn-teal);
    outline-offset: 2px;
}

.prn-chip.is-active {
    background: var(--prn-int-strong);
    border-color: var(--prn-int-strong);
    color: var(--prn-int-strong-on);
}

.prn-chip.is-ci,
.prn-chip[disabled],
.prn-chip[aria-disabled="true"] {
    background: var(--prn-danger-bg);
    border-color: var(--prn-danger);
    color: var(--prn-danger);
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 0.85;
}

/* ==========================================================================
   3. Callouts (avertissements colorés)
   --------------------------------------------------------------------------
   Usage :
   <div class="prn-callout prn-callout-warn">⚠ Texte d'avertissement</div>
   <div class="prn-callout prn-callout-danger">⛔ Contre-indication absolue</div>
   <div class="prn-callout prn-callout-info">ℹ Information complémentaire</div>
   <div class="prn-callout prn-callout-success">✓ Confirmation positive</div>
   ========================================================================== */
.prn-callout {
    display: block;
    padding: 0.65rem 0.9rem;
    margin: 0.5rem 0;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    line-height: 1.5;
}

.prn-callout-warn {
    color: var(--prn-warning);
    background: var(--prn-warning-bg);
    border-left: 3px solid var(--prn-warning);
}

.prn-callout-danger {
    color: var(--prn-danger);
    background: var(--prn-danger-bg);
    border-left: 3px solid var(--prn-danger);
    font-weight: 600;
}

.prn-callout-info {
    color: var(--prn-blue);
    background: var(--prn-blue-light);
    border-left: 3px solid var(--prn-blue);
}

.prn-callout-success {
    color: var(--prn-success);
    background: var(--prn-success-bg);
    border-left: 3px solid var(--prn-success);
}

/* Variante "encadré épais" pour CI absolues majeures (style voyage .prn-mnp-redflag) */
.prn-callout-redflag {
    color: var(--prn-danger);
    background: var(--prn-danger-bg-soft);
    border: 2px solid var(--prn-danger);
    border-left: 6px solid var(--prn-danger);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.92rem;
    font-weight: 600;
}

@supports not (backdrop-filter: blur(10px)) {
    .prn-actions-sticky { background: var(--prn-surface); }
}

@media (max-width: 640px) {
    .prn-actions-sticky {
        padding: 0.7rem 0.85rem;
        margin: 1rem -0.85rem -0.85rem;
    }
    .prn-actions-sticky .btn {
        min-width: 110px;
        padding: 0.65rem 1rem;
    }
}

/* ==========================================================================
   5. Tags PIQ (admissibilité couverture vaccinale)
   --------------------------------------------------------------------------
   Usage :
   <span class="prn-piq-tag is-free">Gratuit (PIQ)</span>
   <span class="prn-piq-tag is-paid">À la charge du patient</span>
   ========================================================================== */
.prn-piq-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.prn-piq-tag.is-free {
    background: var(--prn-success-bg);
    color: var(--prn-success);
    border: 1px solid color-mix(in srgb, var(--prn-success) 35%, transparent);
}

.prn-piq-tag.is-paid {
    background: var(--prn-warning-bg);
    color: var(--prn-warning);
    border: 1px solid color-mix(in srgb, var(--prn-warning) 35%, transparent);
}

/* ==========================================================================
   6. Carte patient (sectionnement standard)
   --------------------------------------------------------------------------
   Usage :
   <article class="prn-pat-card prn-pat-card--adult">
       <header class="prn-pat-head">
           <strong>Voyageur 1</strong>
           <input class="prn-pat-initials" type="text" maxlength="6" placeholder="Initiales">
       </header>
       <section class="prn-pat-section prn-pat-section--sex">…</section>
       <section class="prn-pat-section prn-pat-section--preg" hidden>…</section>
       <section class="prn-pat-section prn-pat-section--allergies">…</section>
       <section class="prn-pat-section prn-pat-section--conditions">…</section>
   </article>
   ========================================================================== */
.prn-pat-card {
    border: 1px solid var(--prn-line);
    border-left: 4px solid var(--prn-int-strong);
    border-radius: var(--radius);
    background: var(--prn-surface);
    padding: 1rem 1.15rem;
    margin: 0.85rem 0;
}

.prn-pat-card--adult { border-left-color: var(--prn-success); }
.prn-pat-card--kid   { border-left-color: var(--prn-blue); }

.prn-pat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--prn-line-soft);
}

.prn-pat-head strong {
    font-size: 1rem;
    color: var(--prn-navy);
}

.prn-pat-initials {
    width: 6rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface-2);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.prn-pat-section {
    margin: 0.65rem 0;
}

.prn-pat-section h4 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--prn-muted);
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.prn-pat-section[hidden] { display: none !important; }

/* Pillgroup utilisé par PRN_PATIENT_SECTION pour sexe/grossesse */
.prn-pillgroup {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ==========================================================================
   7. Grille de cases à cocher (allergies / conditions)
   --------------------------------------------------------------------------
   Usage :
   <div class="prn-chk-grid">
       <label class="prn-chk"><input type="checkbox"> Pénicilline</label>
       <label class="prn-chk"><input type="checkbox"> Sulfamides</label>
   </div>
   ========================================================================== */
.prn-chk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}

.prn-chk {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface);
    cursor: pointer;
    font-size: 0.88rem;
    transition: border-color var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out);
}

.prn-chk:hover {
    border-color: var(--prn-int-hover-border);
    background: var(--prn-int-hover-bg);
}

.prn-chk input[type="checkbox"] {
    accent-color: var(--prn-int-strong);
    cursor: pointer;
}

.prn-chk:has(input[type="checkbox"]:checked) {
    border-color: var(--prn-int-selected-border);
    background: var(--prn-int-selected-bg);
    color: var(--prn-int-text);
    font-weight: 600;
}

@media (max-width: 640px) {
    .prn-chk-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. Champ texte libre (allergies / conditions « Autre »)
   ========================================================================== */
.prn-freetext {
    display: block;
    margin: 0.5rem 0;
}

.prn-freetext label {
    display: block;
    font-size: 0.78rem;
    color: var(--prn-muted);
    margin-bottom: 0.25rem;
}

.prn-freetext input,
.prn-freetext textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--prn-ink);
}

.prn-freetext input:focus-visible,
.prn-freetext textarea:focus-visible {
    outline: 2px solid var(--prn-teal);
    outline-offset: 1px;
    border-color: var(--prn-teal);
}

/* ==========================================================================
   10. Section collapsible (chevron rotatif)
   ========================================================================== */
.prn-collapsible {
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0.5rem 0;
}

/* Titre repliable focusable au clavier (role=button, tabindex=0) : anneau de
   focus visible cohérent avec les autres contrôles. */
.prn-collapsible > h3 { cursor: pointer; }
.prn-collapsible > h3:focus-visible {
    outline: 2px solid var(--prn-teal);
    outline-offset: 2px;
    border-radius: 4px;
}

.prn-collapsible-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.25s var(--ease-out);
    color: var(--prn-muted);
    flex-shrink: 0;
}

.prn-collapsible.is-open .prn-collapsible-chevron {
    transform: rotate(180deg);
}

.prn-collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease-out), padding 0.3s var(--ease-out);
    padding: 0 1rem;
}

.prn-collapsible.is-open .prn-collapsible-body {
    max-height: 30000px;
    padding: 0.75rem 1rem;
}

/* ==========================================================================
   Confirmation pré-ordonnance (.prn-rx-confirm) — Sprint 3 R5
   --------------------------------------------------------------------------
   Bloc « voici ce qui sera prescrit » avant le bouton Générer l'ordonnance.
   Volontairement saillant pour servir de garde-fou : le pharmacien doit voir
   en un coup d'œil le patient, les Rx finales et les avertissements avant
   d'imprimer. Inspiré de .con-rx-summary / .cou-rx-summary (modules qui
   l'avaient déjà), généralisé pour dermato et hta.

   Usage :
   <section class="prn-rx-confirm">
     <header class="prn-rx-confirm-head">
       <span class="prn-rx-confirm-icon">🩺</span>
       <div>
         <h3>Ordonnance à générer</h3>
         <p>Vérifier puis cliquer Générer l'ordonnance.</p>
       </div>
     </header>
     <dl class="prn-rx-confirm-meta"> ... </dl>
     <ul class="prn-rx-confirm-list"> ... </ul>
     <div class="prn-rx-confirm-warn"> ... </div>  (optionnel)
   </section>
   ========================================================================== */
.prn-rx-confirm {
    background: color-mix(in srgb, var(--prn-accent, #0f766e) 6%, var(--prn-surface));
    border: 1px solid color-mix(in srgb, var(--prn-accent, #0f766e) 25%, var(--prn-line));
    border-left: 4px solid var(--prn-accent, #0f766e);
    border-radius: var(--radius, 10px);
    padding: 1rem 1.1rem;
    margin: 1rem 0;
}
.prn-rx-confirm-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}
.prn-rx-confirm-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.prn-rx-confirm-head h3 {
    margin: 0;
    color: var(--prn-accent, #0f766e);
    font-size: 1.05rem;
    font-family: var(--font-serif, inherit);
}
.prn-rx-confirm-head p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--prn-muted);
}
.prn-rx-confirm-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.7rem;
    margin: 0.4rem 0 0.6rem;
    font-size: 0.85rem;
}
.prn-rx-confirm-meta dt {
    color: var(--prn-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.prn-rx-confirm-meta dd {
    margin: 0;
    color: var(--prn-ink);
    font-weight: 500;
}
.prn-rx-confirm-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    border-top: 1px dashed color-mix(in srgb, var(--prn-accent, #0f766e) 30%, var(--prn-line));
}
.prn-rx-confirm-list li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--prn-accent, #0f766e) 15%, var(--prn-line));
    font-size: 0.9rem;
    line-height: 1.4;
}
.prn-rx-confirm-list li:last-child { border-bottom: none; }
.prn-rx-confirm-list strong {
    display: inline-block;
    color: var(--prn-ink);
}
.prn-rx-confirm-list .prn-rx-confirm-dose {
    display: block;
    margin-top: 0.15rem;
    color: var(--prn-muted);
    font-size: 0.82rem;
}
.prn-rx-confirm-empty {
    margin: 0.4rem 0 0;
    padding: 0.6rem;
    background: color-mix(in srgb, #b45309 8%, var(--prn-surface));
    border: 1px dashed color-mix(in srgb, #b45309 30%, var(--prn-line));
    border-radius: 6px;
    color: #92400e;
    font-size: 0.85rem;
}
.prn-rx-confirm-warn {
    margin-top: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: color-mix(in srgb, #b45309 8%, var(--prn-surface));
    border-left: 3px solid #b45309;
    border-radius: 6px;
    font-size: 0.83rem;
    color: #92400e;
}
.prn-rx-confirm-cta {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--prn-muted);
}
.prn-rx-confirm-cta strong { color: var(--prn-accent, #0f766e); }

[data-theme="dark"] .prn-rx-confirm,
:root:not([data-theme="light"]) .prn-rx-confirm {
    background: color-mix(in srgb, var(--prn-accent, #5eead4) 10%, var(--prn-surface));
    border-color: color-mix(in srgb, var(--prn-accent, #5eead4) 45%, var(--prn-line));
}
[data-theme="dark"] .prn-rx-confirm-empty,
[data-theme="dark"] .prn-rx-confirm-warn,
:root:not([data-theme="light"]) .prn-rx-confirm-empty,
:root:not([data-theme="light"]) .prn-rx-confirm-warn {
    background: color-mix(in srgb, #f59e0b 18%, var(--prn-surface));
    color: #fcd34d;
    border-color: color-mix(in srgb, #f59e0b 45%, var(--prn-line));
}

/* ==========================================================================
   Icônes SVG (langage visuel unifié — voir js/prn-icons.js)
   --------------------------------------------------------------------------
   Le shim DOM remplace les emojis dans les nœuds texte par des spans .prn-icon
   contenant un SVG inline. Les SVG héritent de la couleur via currentColor et
   de la taille via 1em.
   ========================================================================== */
.prn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.prn-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible;
}
.prn-icon--sm { width: 0.85em; height: 0.85em; }
.prn-icon--lg { width: 1.2em;  height: 1.2em; }

/* Dark mode : le disque brun (🟤, fill inline #78350f dans prn-icons.js) est
   quasi invisible sur fond sombre (< 2:1) — éclaircir vers un brun-ambre
   (3.1:1+ sur surface/fond). Une règle CSS bat l'attribut de présentation. */
[data-theme="dark"] .prn-icon svg circle[fill="#78350f"] { fill: #b45309; }

@media print {
    /* Force la taille des icônes en impression — défense en profondeur :
       prn-icons.js injecte aussi cette règle, mais elle reste utile si le
       script tarde à s'exécuter ou si le DOM est snapshoté avant init. */
    .prn-icon, .prn-icon svg {
        width: 0.95em !important;
        height: 0.95em !important;
        max-width: 14px;
        max-height: 14px;
        vertical-align: middle;
        color: inherit;
    }
    /* Pas d'icônes dans les boutons d'action sur une ordonnance imprimée. */
    .no-print .prn-icon,
    button .prn-icon,
    .prn-actions-sticky .prn-icon { display: none !important; }
}

/* ==========================================================================
   RBAC : cartes consultation verrouillées
   ========================================================================== */
.consult-card.prn-locked {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
    cursor: default;
    user-select: none;
}
.consult-card.prn-locked:hover {
    border-color: var(--prn-line-soft);
    box-shadow: none;
    transform: none;
}
.consult-card.prn-locked:hover::before { opacity: 0; }
.consult-card.prn-locked .consult-arrow { display: none; }

.prn-lock-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--prn-muted);
    background: var(--prn-bg);
    border: 1px solid var(--prn-line);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.prn-lock-icon {
    font-size: 1.1rem;
    line-height: 1;
    margin-right: 0.3rem;
}

/* ==========================================================================
   RBAC : overlay page module verrouillée
   ========================================================================== */
.prn-module-locked {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--prn-bg);
    z-index: 9999;
}
.prn-module-locked-inner {
    text-align: center;
    max-width: 420px;
    padding: 2rem;
}
.prn-module-locked-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}
.prn-module-locked h1 {
    font-family: Lora, Georgia, serif;
    color: var(--prn-navy);
    font-size: 1.4rem;
    margin: 0 0 0.75rem;
}
.prn-module-locked p {
    color: var(--prn-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* ==========================================================================
   Standardisation HTA (2026-07) — composants transversaux des consultations
   --------------------------------------------------------------------------
   Consommés par js/cons-ui.js (PRN_CONS_UI) :
   - .cons-flags / .cons-flag — signaux d'alarme encadrés + « Pourquoi on
                                s'inquiète » (redFlagsHtml — toutes consultations)
   - .prn-opt-badge        — badge d'option (Meilleure option / À éviter…)
   - .prn-opt-note         — note justificative attachée à une option
   - .prn-rx-editor        — dose / posologie / renouvellements éditables
   - .prn-timeline         — plan de suivi daté (généralise .hta-timeline-list)
   ========================================================================== */

/* --- Signaux d'alarme encadrés (redFlagsHtml) ---------------------------
   Refonte 2026-07 : signal scannable, crainte clinique repliée dans un
   <details class="cons-flag-more"> — divulgation progressive. */
.cons-flags { list-style: none; padding: 0; margin: 0.75rem 0; }
.cons-flag {
    border: 1px solid var(--prn-line);
    border-left: 4px solid #b00020;
    border-radius: 12px;
    background: #fff6f6;
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
}
.cons-flag-label { margin: 0; font-weight: 600; line-height: 1.5; }
.cons-flag-more { margin: 0.25rem 0 0; }
.cons-flag-more summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    color: #9a1b2f;
    border-radius: 6px;
    padding: 0.1rem 0.3rem 0.1rem 0;
    -webkit-user-select: none;
    user-select: none;
}
.cons-flag-more summary::-webkit-details-marker { display: none; }
.cons-flag-more summary::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 140ms ease-out;
    flex-shrink: 0;
}
.cons-flag-more[open] summary::before { transform: rotate(45deg); }
.cons-flag-more summary:hover { text-decoration: underline; }
.cons-flag-more summary:focus-visible { outline: 2px solid #b00020; outline-offset: 2px; }
.cons-flag-more summary strong { font-weight: 600; }
.cons-flag-concern {
    margin: 0.35rem 0 0.15rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--prn-ink-soft, #44505f);
}
.cons-flag-concern strong { color: #b00020; font-weight: 700; }
[data-theme="dark"] .cons-flag { background: #2a1414; }
[data-theme="dark"] .cons-flag-more summary { color: #ff9d9d; }
[data-theme="dark"] .cons-flag-more summary:focus-visible { outline-color: #ff8a8a; }
[data-theme="dark"] .cons-flag-concern { color: #d8b4b4; }
[data-theme="dark"] .cons-flag-concern strong { color: #ff8a8a; }

/* --- Volet « Pourquoi » précautions/CI (whyHtml — toutes consultations) --
   Divulgation progressive ambre : la chip précaution/CI reste scannable, la
   justification clinique s'ouvre sur demande. Globale (chargée par toutes les
   pages via components.css) — les modules bespoke n'ont pas consultations.css.
   .prn-ci-item / .prn-flag-item : conteneur vertical chip|case + volet, frères
   (jamais imbriqués — le volet ne doit pas cocher la case). */
.prn-ci-item,
.prn-flag-item { display: flex; flex-direction: column; gap: 0.25rem; }
/* Sur une case à cocher .prn-mc, le volet « Pourquoi on s'inquiète »
   (.cons-flag-more) posé en frère reçoit un léger décalage pour s'aligner
   sous le libellé (au-delà de la case). Les chips pleins n'y touchent pas. */
.prn-mc + .cons-flag-more { margin-left: 1.9rem; }
.prn-why { margin: 0.1rem 0 0.15rem; }
.prn-why > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8a5800;
    border-radius: 6px;
    padding: 0.1rem 0.25rem 0.1rem 0;
}
.prn-why > summary::-webkit-details-marker { display: none; }
.prn-why > summary::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 140ms ease-out;
    flex-shrink: 0;
}
.prn-why[open] > summary::before { transform: rotate(45deg); }
.prn-why > summary:hover { text-decoration: underline; }
.prn-why > summary:focus-visible { outline: 2px solid #8a5800; outline-offset: 2px; }
.prn-why-body { padding: 0.15rem 0 0.1rem; }
.prn-why-body p {
    margin: 0.15rem 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--prn-ink-soft, #44505f);
}
[data-theme="dark"] .prn-why > summary { color: #ffce73; }
[data-theme="dark"] .prn-why > summary:focus-visible { outline-color: #ffce73; }
[data-theme="dark"] .prn-why-body p { color: #d8d0c4; }

.prn-opt-badge { vertical-align: middle; }

/* --- Note justificative par option ------------------------------------- */
.prn-opt-note { margin: 0.35rem 0 0.75rem; }
.prn-note-warn {
    margin: 0.3rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a5800;
}
[data-theme="dark"] .prn-note-warn { color: #ffce73; }
.prn-note-toggle {
    background: none;
    border: none;
    padding: 0.15rem 0.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--prn-teal, #1a6b5a);
    cursor: pointer;
    border-radius: 4px;
}
.prn-note-toggle:hover { text-decoration: underline; }
.prn-note-toggle:focus-visible { outline: 2px solid var(--prn-teal, #1a6b5a); outline-offset: 2px; }
.prn-note-label { display: block; }
.prn-note-label > span {
    display: block;
    font-size: 0.78rem;
    color: var(--prn-muted);
    margin: 0.25rem 0 0.2rem;
}
.prn-note-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--prn-line);
    border-radius: 8px;
    background: var(--prn-surface);
    color: var(--prn-ink);
    font: inherit;
    font-size: 0.88rem;
    padding: 0.45rem 0.6rem;
    resize: vertical;
    min-height: 2.6rem;
}
.prn-note-input:focus-visible { outline: 2px solid var(--prn-teal, #1a6b5a); outline-offset: 1px; }
.prn-opt-note.is-avoid .prn-note-input,
.prn-rx-row.is-avoid .prn-note-input { border-color: #d9930d; }

/* --- Éditeur d'ordonnance (dose / posologie / renouvellements) ---------- */
.prn-rx-editor .prn-rx-hint {
    margin: 0.1rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--prn-muted);
}
.prn-rx-row {
    border: 1.5px solid var(--prn-line);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.7rem;
    background: var(--prn-surface);
}
.prn-rx-row.is-avoid { border-color: #d9930d; }
.prn-rx-row:last-child { margin-bottom: 0; }
.prn-rx-drug {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.prn-rx-sub { font-size: 0.82rem; color: var(--prn-muted); }
.prn-rx-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}
.prn-rx-field { flex: 1 1 130px; min-width: 110px; }
.prn-rx-field--wide { flex: 2 1 260px; }
.prn-rx-field > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--prn-muted);
    margin-bottom: 0.2rem;
}
.prn-rx-input-wrap { display: flex; align-items: center; gap: 0.4rem; }
.prn-rx-input-wrap input,
.prn-rx-input-wrap select {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--prn-line);
    border-radius: 8px;
    background: var(--prn-surface);
    color: var(--prn-ink);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.55rem;
    min-height: 40px;
}
.prn-rx-input-wrap input:focus-visible,
.prn-rx-input-wrap select:focus-visible { outline: 2px solid var(--prn-teal, #1a6b5a); outline-offset: 1px; }
.prn-rx-unit { font-size: 0.82rem; color: var(--prn-muted); white-space: nowrap; }
.prn-rx-note { margin-top: 0.45rem; }
.prn-rx-note summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--prn-teal, #1a6b5a);
    list-style: none;
}
.prn-rx-note summary::-webkit-details-marker { display: none; }
.prn-rx-note summary:hover { text-decoration: underline; }
.prn-rx-note summary:focus-visible { outline: 2px solid var(--prn-teal, #1a6b5a); outline-offset: 2px; }

/* --- Timeline du plan de suivi ------------------------------------------ */
.prn-timeline {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    position: relative;
}
.prn-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--prn-line);
    border-radius: 2px;
}
.prn-timeline-item {
    position: relative;
    padding: 0 0 0.75rem 1.5rem;
}
.prn-timeline-item:last-child { padding-bottom: 0; }
.prn-timeline-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--prn-surface);
    border: 3px solid var(--prn-teal, #1a6b5a);
    box-sizing: border-box;
}
.prn-timeline-when {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--prn-teal, #1a6b5a);
}
.prn-timeline-date { font-weight: 400; color: var(--prn-muted); }
.prn-timeline-label {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--prn-ink);
}

/* ==========================================================================
   Refonte consultations (2026-07) — liserés latéraux → bord complet + teinte
   --------------------------------------------------------------------------
   Remplace les accents `border-left` épais (callouts, signaux, encadrés) par
   un bord complet dans la teinte sémantique + fond teinté. Lecture aussi nette
   (voire plus), rendu plus soigné. Couleurs via tokens → clair/sombre auto.
   ========================================================================== */
.prn-callout-warn {
    border: 1px solid color-mix(in srgb, var(--prn-warning) 32%, var(--prn-line));
    border-radius: var(--radius-sm);
}
.prn-callout-danger {
    border: 1px solid color-mix(in srgb, var(--prn-danger) 38%, var(--prn-line));
    border-radius: var(--radius-sm);
}
.prn-callout-info {
    border: 1px solid color-mix(in srgb, var(--prn-blue) 30%, var(--prn-line));
    border-radius: var(--radius-sm);
}
.prn-callout-success {
    border: 1px solid color-mix(in srgb, var(--prn-success) 32%, var(--prn-line));
    border-radius: var(--radius-sm);
}
.prn-callout-redflag {
    border: 1.5px solid color-mix(in srgb, var(--prn-danger) 55%, var(--prn-line));
}

/* Signaux d'alarme (redFlagsHtml — toutes consultations) : encadré danger net */
.cons-flag {
    border: 1px solid color-mix(in srgb, var(--prn-danger) 34%, var(--prn-line));
    background: var(--prn-danger-bg-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.cons-flag-label { color: var(--prn-navy); }
[data-theme="dark"] .cons-flag,
:root:not([data-theme="light"]) .cons-flag {
    background: color-mix(in srgb, var(--prn-danger) 12%, var(--prn-surface));
    border-color: color-mix(in srgb, var(--prn-danger) 42%, var(--prn-line));
}
[data-theme="dark"] .cons-flag-label,
:root:not([data-theme="light"]) .cons-flag-label { color: var(--prn-navy); }

/* Confirmation pré-ordonnance : bord complet accent (au lieu du liseré) */
.prn-rx-confirm {
    border: 1px solid color-mix(in srgb, var(--prn-accent, #0f766e) 30%, var(--prn-line));
    box-shadow: var(--shadow-xs);
}

/* Cartes patient (voyage/nv/oxyures) : liseré → point de couleur + bord complet */
.prn-pat-card {
    border: 1px solid var(--prn-line);
    box-shadow: var(--shadow-xs);
}
.prn-pat-card--adult { border-color: color-mix(in srgb, var(--prn-success) 30%, var(--prn-line)); }
.prn-pat-card--kid   { border-color: color-mix(in srgb, var(--prn-blue) 30%, var(--prn-line)); }

/* ==========================================================================
   Questionnaire de score en fenêtre modale (CAT, ACT…) — PRN_CONS_UI
   ========================================================================== */
.prn-qmodal {
    width: min(680px, 94vw);
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--prn-line);
    border-radius: 16px;
    background: var(--prn-surface);
    color: var(--prn-ink);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.prn-qmodal::backdrop { background: rgba(10, 20, 30, 0.55); backdrop-filter: blur(2px); }
.prn-qm { display: flex; flex-direction: column; max-height: 90vh; }
.prn-qm-head {
    padding: 1.1rem 1.3rem 0.8rem;
    border-bottom: 1px solid var(--prn-line-soft, var(--prn-line));
}
.prn-qm-title { margin: 0; font-size: 1.1rem; color: var(--prn-navy); }
.prn-qm-intro { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--prn-muted); line-height: 1.5; }
.prn-qm-list {
    list-style: none; margin: 0; padding: 0.6rem 1.3rem;
    overflow-y: auto; flex: 1 1 auto;
}
.prn-qm-item { padding: 0.7rem 0; border-bottom: 1px dashed var(--prn-line); }
.prn-qm-item:last-child { border-bottom: 0; }
.prn-qm-q { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; line-height: 1.45; display: flex; gap: 0.5rem; }
.prn-qm-n {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--prn-teal-light, #e6f4f1); color: var(--prn-teal-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
}
/* Échelle numérique (CAT) : deux énoncés + boutons 0-5 */
.prn-qm-scale { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.prn-qm-anchor { font-size: 0.78rem; color: var(--prn-muted); flex: 1 1 140px; }
.prn-qm-anchor--right { text-align: right; }
.prn-qm-dots { display: inline-flex; gap: 0.35rem; }
.prn-qm-dot {
    width: 2.1rem; height: 2.1rem; border-radius: 8px;
    border: 1.5px solid var(--prn-line); background: var(--prn-bg-elev, var(--prn-surface));
    color: var(--prn-ink); font-weight: 700; cursor: pointer; transition: all 0.12s;
}
.prn-qm-dot:hover { border-color: var(--prn-int-strong); }
.prn-qm-dot.is-selected {
    background: var(--prn-int-strong); border-color: var(--prn-int-strong);
    color: var(--prn-int-strong-on, #fff);
}
/* Options libellées (ACT) */
.prn-qm-opts { display: flex; flex-direction: column; gap: 0.35rem; }
.prn-qm-opt {
    display: flex; align-items: center; gap: 0.6rem; text-align: left;
    padding: 0.45rem 0.6rem; border: 1.5px solid var(--prn-line); border-radius: 10px;
    background: var(--prn-bg-elev, var(--prn-surface)); color: var(--prn-ink);
    cursor: pointer; transition: all 0.12s; font: inherit;
}
.prn-qm-opt:hover { border-color: var(--prn-int-strong); }
.prn-qm-opt.is-selected { border-color: var(--prn-int-strong); background: var(--prn-teal-light, #e6f4f1); }
.prn-qm-opt-v {
    flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--prn-line-soft, var(--prn-line)); font-weight: 700; font-size: 0.85rem;
}
.prn-qm-opt.is-selected .prn-qm-opt-v { background: var(--prn-int-strong); color: var(--prn-int-strong-on, #fff); }
.prn-qm-opt-l { font-size: 0.86rem; line-height: 1.4; }
/* Pied : score + actions */
.prn-qm-foot { padding: 0.9rem 1.3rem 1.1rem; border-top: 1px solid var(--prn-line); background: var(--prn-bg-elev, var(--prn-surface)); }
.prn-qm-score { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.prn-qm-score-lbl { font-size: 0.85rem; color: var(--prn-muted); font-weight: 600; }
.prn-qm-score-val { font-size: 1.25rem; font-weight: 800; color: var(--prn-navy); }
.prn-qm-interp { font-size: 0.82rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.prn-qm-interp[data-tone="ok"]   { background: var(--prn-success-bg); color: var(--prn-success); }
.prn-qm-interp[data-tone="warn"] { background: var(--prn-warning-bg); color: var(--prn-warning); }
.prn-qm-interp[data-tone="bad"]  { background: var(--prn-danger-bg);  color: var(--prn-danger); }
.prn-qm-hint { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--prn-muted); }
.prn-qm-hint[hidden] { display: none; }
.prn-qm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.8rem; }

/* Encadré de résultat (score ACT/CAT reporté dans une étape) */
.prn-score-result {
    margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 10px;
    border: 1px solid var(--prn-line); background: var(--prn-bg-elev, var(--prn-surface));
    font-size: 0.9rem;
}
.prn-score-result p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--prn-ink-soft, var(--prn-muted)); }
.prn-score-result[data-tone="ok"]   { border-color: var(--prn-success); background: var(--prn-success-bg); }
.prn-score-result[data-tone="warn"] { border-color: var(--prn-warning); background: var(--prn-warning-bg); }
.prn-score-result[data-tone="bad"]  { border-color: var(--prn-danger);  background: var(--prn-danger-bg); }

@media (max-width: 560px) {
    .prn-qm-dot { width: 1.8rem; height: 1.8rem; }
    .prn-qm-anchor { flex-basis: 100%; }
    .prn-qm-anchor--right { text-align: left; }
}

/* ==========================================================================
   Fin components.css
   ========================================================================== */