/* ============================================================================
   Pro Re Nata — Styles consultation Douleur chronique
   ----------------------------------------------------------------------------
   Inspirée du style HTA : compose avec .voyage-shell / .voyage-step.
   Palette : indigo profond pour la douleur chronique (≠ rouge HTA, vert
   asthme, etc.). Vert "succès" pour cible PEER atteinte, orange pour avertir.
   ========================================================================== */

.douleur-page {
    --dou-accent: #4f46e5;
    --dou-accent-strong: #4338ca;
    --dou-accent-soft: #eef2ff;
    --dou-accent-line: #c7d2fe;
    --dou-good: #16a34a;
    --dou-good-soft: #ecfdf5;
    --dou-warn: #b45309;
    --dou-warn-soft: #fffbeb;
    --dou-danger: #b91c1c;
    --dou-danger-soft: #fef2f2;
}

.douleur-page .page-header h1 { color: var(--dou-accent); }
.douleur-page .progress-bar { background: linear-gradient(90deg, var(--dou-accent), #818cf8); }
.douleur-page .source-note { font-size: 12px; color: var(--prn-muted); margin-top: 6px; font-style: italic; }

/* ── Blocs ────────────────────────────────────────────────────────── */
.douleur-page .dou-block {
    margin: 0.9rem 0 1.1rem;
    padding: 0.85rem 1rem;
    background: var(--prn-surface);
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
}
.douleur-page .dou-block-emph {
    background: var(--dou-accent-soft);
    border-color: var(--dou-accent-line);
}
.douleur-page .dou-block h3 {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    color: var(--dou-accent);
    font-weight: 700;
    font-family: var(--font-sans);
}
.douleur-page .dou-block h4 {
    margin: 0.6rem 0 0.4rem;
    font-size: 0.88rem;
    color: var(--prn-ink);
    font-weight: 700;
}
.douleur-page .dou-help {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--prn-muted);
    line-height: 1.45;
}
.douleur-page .dou-subblock {
    margin: 0.5rem 0;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid var(--dou-accent-line);
    background: color-mix(in srgb, var(--prn-surface) 80%, transparent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Grilles ──────────────────────────────────────────────────────── */
.douleur-page .dou-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.6rem 0.7rem;
}
.douleur-page .dou-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem 0.7rem;
}
.douleur-page .dou-grid-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.55rem;
}
.douleur-page .dou-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.douleur-page .dou-row .p-field { flex: 1 1 160px; }

/* ── Tuiles (motif, pain type, outcome) ───────────────────────────── */
.douleur-page .dou-tile {
    appearance: none;
    border: 1.5px solid var(--prn-line);
    background: var(--prn-surface);
    color: var(--prn-ink);
    border-radius: 14px;
    padding: 0.95rem 0.95rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
    display: flex; gap: 0.8rem; align-items: flex-start;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.douleur-page .dou-tile:hover,
.douleur-page .dou-tile:focus-visible {
    border-color: var(--dou-accent);
    outline: 2px solid color-mix(in srgb, var(--dou-accent) 30%, transparent);
    outline-offset: 1px;
}
.douleur-page .dou-tile.is-selected {
    border-color: var(--dou-accent);
    background: var(--dou-accent-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dou-accent) 15%, transparent);
}
.douleur-page .dou-tile-icon {
    font-size: 1.7rem;
    line-height: 1;
    flex: 0 0 auto;
}
.douleur-page .dou-tile-body { flex: 1 1 auto; }
.douleur-page .dou-tile-body strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    color: var(--dou-accent-strong);
}
.douleur-page .dou-tile-body p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--prn-muted);
    line-height: 1.45;
}
.douleur-page .dou-tile-evidence {
    margin-top: 0.4rem !important;
    font-size: 0.75rem !important;
    font-style: italic;
    color: var(--dou-accent) !important;
}

/* ── Inputs : 16px iOS no-zoom ────────────────────────────────────── */
.douleur-page .p-field { display: flex; flex-direction: column; gap: 0.25rem; }
.douleur-page .p-field > span {
    font-size: 0.78rem;
    color: var(--prn-muted);
    font-weight: 600;
}
.douleur-page input[type="number"],
.douleur-page input[type="text"],
.douleur-page input[type="date"],
.douleur-page select {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    font-size: 16px;
    font-family: inherit;
    color: var(--prn-navy);
    background: var(--prn-surface);
    min-height: 44px;
    box-sizing: border-box;
}
.douleur-page input:focus,
.douleur-page select:focus {
    outline: none;
    border-color: var(--dou-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dou-accent) 20%, transparent);
}

/* ── Chips ────────────────────────────────────────────────────────── */
.douleur-page .dou-chips {
    display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.douleur-page .dou-chips-stack {
    flex-direction: column;
}
.douleur-page .dou-chip {
    appearance: none;
    border: 1px solid var(--prn-line);
    background: var(--prn-surface);
    color: var(--prn-ink);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.45rem;
    min-height: 38px;
    transition: background .15s, border-color .15s, color .15s;
}
.douleur-page .dou-chips-stack .dou-chip {
    border-radius: 12px;
    justify-content: space-between;
    width: 100%;
}
.douleur-page .dou-chip:hover,
.douleur-page .dou-chip:focus-visible {
    border-color: var(--dou-accent);
}
.douleur-page .dou-chip.is-selected {
    background: var(--dou-accent-soft);
    border-color: var(--dou-accent);
    color: var(--dou-accent-strong);
    font-weight: 600;
}
.douleur-page .dou-chip-flag.is-selected {
    background: var(--dou-danger-soft);
    border-color: var(--dou-danger);
    color: var(--dou-danger);
}

.douleur-page .dou-sev {
    display: inline-flex;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.douleur-page .dou-sev-blocking { background: var(--dou-danger-soft); color: var(--dou-danger); }
.douleur-page .dou-sev-warn     { background: var(--dou-warn-soft);   color: var(--dou-warn); }

/* ── Acknowledgement (drapeaux rouges confirmés) ──────────────────── */
.douleur-page .dou-ack {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--dou-accent);
    border-radius: 12px;
    margin-top: 0.7rem;
    cursor: pointer;
    background: var(--dou-accent-soft);
}
.douleur-page .dou-ack input { margin-top: 0.2rem; transform: scale(1.2); }
.douleur-page .dou-ack span { font-weight: 600; line-height: 1.4; }

/* ── Callout ──────────────────────────────────────────────────────── */
.douleur-page .dou-callout {
    margin: 0.7rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 4px solid var(--dou-accent);
    background: var(--dou-accent-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
.douleur-page .dou-callout-success { border-color: var(--dou-good); background: var(--dou-good-soft); color: #065f46; }
.douleur-page .dou-callout-warn    { border-color: var(--dou-warn); background: var(--dou-warn-soft); color: #78350f; }
.douleur-page .dou-callout-danger  { border-color: var(--dou-danger); background: var(--dou-danger-soft); color: var(--dou-danger); }

/* ── DN4 ──────────────────────────────────────────────────────────── */
.douleur-page .dou-details {
    margin: 0.7rem 0;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--prn-surface) 70%, transparent);
    font-size: 0.88rem;
}
.douleur-page .dou-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--prn-ink);
}
.douleur-page .dou-details[open] { background: var(--prn-surface); }
.douleur-page .dou-dn4-group { margin: 0.7rem 0; }
.douleur-page .dou-dn4-group h4 { margin-bottom: 0.4rem; }
.douleur-page .dou-dn4-score {
    margin-top: 0.8rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    background: var(--dou-accent-soft);
    font-weight: 600;
}
.douleur-page .dou-dn4-pos { color: var(--dou-accent-strong); margin-left: 0.4rem; }
.douleur-page .dou-dn4-neg { color: var(--prn-muted); margin-left: 0.4rem; font-weight: 500; }

/* ── Checks (non-pharm) ──────────────────────────────────────────── */
.douleur-page .dou-check {
    appearance: none;
    border: 1.5px solid var(--prn-line);
    background: var(--prn-surface);
    color: var(--prn-ink);
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    display: block;
    transition: border-color .15s, background .15s;
}
.douleur-page .dou-check:hover,
.douleur-page .dou-check:focus-visible {
    border-color: var(--dou-accent);
}
.douleur-page .dou-check.is-selected {
    border-color: var(--dou-accent);
    background: var(--dou-accent-soft);
}
.douleur-page .dou-check-head {
    margin-bottom: 0.3rem;
    font-size: 0.92rem;
}
.douleur-page .dou-check-detail {
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
    color: var(--prn-muted);
    line-height: 1.4;
}
.douleur-page .dou-check-effet {
    margin: 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--dou-accent);
}

/* ── Recommandation auto / lignes ─────────────────────────────────── */
.douleur-page .dou-line {
    margin: 0.7rem 0;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--prn-line);
    background: var(--prn-surface);
}
.douleur-page .dou-line h4 { color: var(--dou-accent-strong); }
.douleur-page .dou-line-1 { border-left: 4px solid var(--dou-good); }
.douleur-page .dou-line-2 { border-left: 4px solid var(--dou-accent); }
.douleur-page .dou-line-3 { border-left: 4px solid var(--dou-warn); }
.douleur-page .dou-line ul { margin: 0; padding-left: 1.1rem; }
.douleur-page .dou-line li { margin: 0.45rem 0; }
.douleur-page .dou-li-sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--prn-muted);
    line-height: 1.4;
}
.douleur-page .dou-li-warn {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--dou-warn);
    font-weight: 500;
}
.douleur-page .dou-badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.douleur-page .dou-badge-fav { background: var(--dou-good-soft); color: #047857; }
.douleur-page .dou-badge-cau { background: var(--dou-warn-soft); color: #92400e; }
.douleur-page .dou-nnt {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 6px;
    background: var(--dou-accent);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.3rem;
}
.douleur-page .dou-excluded li { font-size: 0.85rem; color: var(--prn-muted); }

/* ── Agent selection ──────────────────────────────────────────────── */
.douleur-page .dou-class-item {
    margin: 0.5rem 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
}
.douleur-page .dou-class-toggle {
    display: flex; align-items: center; gap: 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.douleur-page .dou-class-toggle input { transform: scale(1.1); }
.douleur-page .dou-class-detail {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* ── Algorithme (ladder) ─────────────────────────────────────────── */
.douleur-page .dou-algo {
    margin: 0;
    padding-left: 1.2rem;
}
.douleur-page .dou-algo > li {
    margin: 0.5rem 0;
}
.douleur-page .dou-algo ul {
    margin: 0.3rem 0 0.6rem;
    padding-left: 1rem;
}

/* ── Sources / timeline / counsel ─────────────────────────────────── */
.douleur-page .dou-sources { font-size: 0.84rem; color: var(--prn-muted); }
.douleur-page .dou-sources li { margin: 0.25rem 0; }

/* ── Prescription preview ────────────────────────────────────────── */
.douleur-page .dou-rx { border-left: 4px solid var(--dou-accent); }
.douleur-page .dou-rx-list {
    margin: 0.5rem 0;
    padding-left: 1.2rem;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 0.9rem;
}
.douleur-page .dou-rx-sig {
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--prn-line);
    font-size: 0.82rem;
    color: var(--prn-muted);
    font-style: italic;
}

/* ── Action hint ──────────────────────────────────────────────────── */
.douleur-page .dou-action-hint {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--dou-warn);
    font-weight: 600;
}
.douleur-page .dou-action-hint:empty { display: none; }

/* ── Actions row (ordonnance + print) ─────────────────────────────── */
.douleur-page .dou-actions-row {
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ── Standardisation HTA (2026-07) — cons-ui.js ───────────────────────
   L'éditeur d'ordonnance partagé est émis avec la classe .cons-card
   (stylée sous .cons-page seulement) : reprendre ici l'habillage des
   .dou-block. Note du pharmacien dans l'aperçu d'ordonnance. */
.douleur-page .prn-rx-editor {
    border: 1px solid var(--prn-line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
    background: var(--prn-bg);
    border-left: 4px solid var(--logo-teal);
}
.douleur-page .prn-rx-editor h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.douleur-page .dou-rx-note {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--prn-muted);
    margin-top: 0.15rem;
}

/* ── Dark mode adjustments ────────────────────────────────────────── */
[data-theme="dark"] .douleur-page {
    --dou-accent: #818cf8;
    --dou-accent-strong: #a5b4fc;
    --dou-accent-soft: #1e1b4b;
    --dou-accent-line: #4338ca;
    --dou-good-soft: #052e1e;
    --dou-warn: #fcd34d;
    --dou-warn-soft: #2a1f0d;
    --dou-danger: #fca5a5;
    --dou-danger-soft: #2a1414;
}
[data-theme="dark"] .douleur-page .dou-tile {
    background: var(--prn-bg);
}
[data-theme="dark"] .douleur-page .dou-callout-success { color: #6ee7b7; }
[data-theme="dark"] .douleur-page .dou-callout-warn    { color: #fcd34d; }
[data-theme="dark"] .douleur-page .dou-callout-danger  { color: #fca5a5; }
[data-theme="dark"] .douleur-page .dou-badge-fav { color: #6ee7b7; }
[data-theme="dark"] .douleur-page .dou-badge-cau { color: #fcd34d; }
[data-theme="dark"] .douleur-page .dou-nnt { color: #131822; }

/* ── Responsive : tablette / mobile ───────────────────────────────── */
@media (max-width: 640px) {
    .douleur-page .dou-grid-2,
    .douleur-page .dou-grid-3 {
        grid-template-columns: 1fr;
    }
    .douleur-page .dou-class-detail {
        grid-template-columns: 1fr;
    }
}