/* ============================================================================
   Pro Re Nata — Triage des plaintes (triage.html)
   Complète wizard.css / consultations.css : recherche, grille de plaintes,
   signaux d'alarme expliqués, cartes d'orientation.
   ----------------------------------------------------------------------------
   Langage visuel : accent TEAL cohérent avec le reste du site (boutons, barre
   de progression), cartes calmes à survol léger, badges de niveau colorés,
   barre d'actions OPAQUE (aucune superposition). Tout est scopé à
   `.triage-page` pour ne rien changer aux autres wizards.
   ============================================================================ */

/* Accent local — teal du design-system (suit le thème), au lieu du bleu
   générique. Une seule source de vérité pour tous les états interactifs. */
.triage-page {
    --tri-accent:        var(--prn-int-strong);          /* bordure/fil pleine */
    --tri-accent-border: var(--prn-int-selected-border); /* bordure sélectionnée */
    --tri-accent-bg:     var(--prn-int-selected-bg);     /* fond sélectionné */
    --tri-accent-hover:  var(--prn-int-hover-border);    /* bordure survol */
    --tri-accent-text:   var(--prn-int-text);            /* texte d'un état actif */
}

/* ── Barre d'actions : OPAQUE et scopée au triage ───────────────────────
   Le défaut partagé (wizard.css) est translucide + flou : sur les longues
   étapes du triage (grille de 62 plaintes, liste de signaux) le contenu
   transparaissait à travers la barre collante — d'où l'impression de cases
   qui se superposent. Ici : fond plein + ombre portée douce = barre nette,
   rien ne transparaît, le contenu glisse proprement dessous. */
.triage-page .voyage-actions {
    background: var(--prn-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--prn-line);
    box-shadow: 0 -10px 24px -12px rgba(15, 45, 78, 0.22);
}
[data-theme="dark"] .triage-page .voyage-actions {
    box-shadow: 0 -12px 28px -12px rgba(0, 0, 0, 0.55);
}
/* Respiration sous le dernier élément d'une étape, pour qu'il ne finisse
   jamais collé/masqué par la barre au bas du défilement. */
.triage-page .voyage-step { padding-bottom: 0.5rem; }

/* ── Cartes cliniques sur la page triage ────────────────────────────────
   `.cons-card` et ses variantes (danger / succès / avertissement) ne sont
   stylées que sous `.cons-page` : sans ces règles, les cartes d'alerte, de
   résultat et de collecte du triage tombaient SANS relief, SANS couleur et
   SANS marge (elles se collaient entre elles). On les porte ici pour
   `.triage-page`, alignées sur les mêmes tokens que le reste du site. */
.triage-page .cons-card {
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin: 0.85rem 0;
    background: var(--prn-surface);
    box-shadow: var(--shadow-xs);
}
.triage-page .cons-card h3 { margin: 0 0 0.55rem; font-size: 1rem; line-height: 1.35; }
.triage-page .cons-card p { margin: 0.3rem 0; line-height: 1.55; }
.triage-page .cons-card ul { margin: 0.3rem 0; padding-left: 1.3rem; line-height: 1.6; }
.triage-page .cons-card-absolute,
.triage-page .cons-card-redflag {
    border-color: color-mix(in srgb, var(--prn-danger) 30%, var(--prn-line));
    border-left: 4px solid var(--prn-danger);
    background: var(--prn-danger-bg-soft);
}
.triage-page .cons-card-warning,
.triage-page .cons-card-caution {
    border-color: color-mix(in srgb, var(--prn-warning) 30%, var(--prn-line));
    border-left: 4px solid var(--prn-warning);
    background: var(--prn-warning-bg);
}
.triage-page .cons-card-success {
    border-color: color-mix(in srgb, var(--prn-success) 30%, var(--prn-line));
    border-left: 4px solid var(--prn-success);
    background: var(--prn-success-bg);
}
.triage-page .cons-card-absolute h3,
.triage-page .cons-card-redflag h3 { color: var(--prn-danger); }
.triage-page .cons-card-success h3 { color: var(--prn-success); }

/* Acquittement « aucun signal d'alarme présent » — boîte teal claire */
.triage-page .cons-ack {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--prn-int-selected-border);
    border-radius: var(--radius);
    margin-top: 1rem;
    cursor: pointer;
    background: var(--prn-teal-light);
    transition: box-shadow 120ms ease-out;
}
.triage-page .cons-ack:hover { box-shadow: 0 0 0 3px var(--prn-int-hover-bg); }
.triage-page .cons-ack input {
    margin-top: 0.15rem; width: 1.15rem; height: 1.15rem;
    accent-color: var(--tri-accent); flex: none; cursor: pointer;
}
.triage-page .cons-ack span { line-height: 1.5; }

/* ── Profil patient ── */
.tri-profile {
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    padding: 0.85rem 1.05rem 1rem;
    margin: 0 0 1.1rem;
    background: var(--prn-surface-2);
}
.tri-profile legend {
    font-weight: 700;
    padding: 0 0.4rem;
    font-size: 0.9rem;
    color: var(--prn-navy);
}
.tri-profile-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.tri-profile-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
}
.tri-profile-row input[type="number"] {
    width: 4.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface);
    color: inherit;
}
.tri-profile-row input[type="number"]:focus-visible {
    outline: 2px solid var(--tri-accent);
    outline-offset: 1px;
    border-color: var(--tri-accent);
}
.tri-profile-group {
    display: inline-flex;
    gap: 0.35rem;
}

/* ── Puce (terrain, sexe, unité d'âge, médication, plainte retenue) ── */
.tri-chip {
    padding: 0.34rem 0.75rem;
    border: 1px solid var(--prn-line);
    border-radius: 999px;
    background: var(--prn-surface);
    color: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.tri-chip:hover { border-color: var(--tri-accent-hover); }
.tri-chip:focus-visible {
    outline: 2px solid var(--tri-accent);
    outline-offset: 1px;
}
.tri-chip.is-selected {
    border-color: var(--tri-accent-border);
    background: var(--tri-accent-bg);
    color: var(--tri-accent-text);
    font-weight: 600;
}
.tri-profile-warn {
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--prn-warning);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--prn-warning-bg);
}
.tri-selected-bar {
    margin: 0.75rem 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--prn-ink-soft);
}

/* ── Unité d'âge (ans / mois) — segment compact ── */
.tri-ageunit .tri-chip {
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
}

/* ── Actions documents (conclusion) ── */
.tri-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* ── Mode formation (formation-triage.html) ── */
.frm-score {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
}
.frm-enonce {
    font-size: 1.05rem;
    line-height: 1.5;
}
.frm-profile,
.frm-complaints {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    opacity: 0.85;
}
.frm-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
}
.frm-choice {
    padding: 0.8rem 0.95rem;
    border: 1.5px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.frm-choice:hover:not(:disabled) {
    border-color: var(--tri-accent-hover);
    box-shadow: var(--shadow-xs);
}
.frm-choice:disabled { cursor: default; opacity: 0.9; }
.frm-choice--good {
    border-color: var(--prn-success);
    background: var(--prn-success-bg);
    font-weight: 600;
}
.frm-choice--bad {
    border-color: var(--prn-danger);
    background: var(--prn-danger-bg);
}
.frm-why ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.frm-why li { margin-bottom: 0.55rem; }
.frm-teach { border-left: 3px solid var(--tri-accent, var(--prn-accent)); }
.frm-teach p { margin: 0.45rem 0 0; line-height: 1.5; }
.frm-teach p:first-of-type { margin-top: 0.2rem; }
.frm-teach-risks { opacity: 0.95; }

/* ── Médication en cours (profil) + badge de correspondance ── */
.tri-meds {
    margin-top: 0.7rem;
    font-size: 0.9rem;
}
.tri-meds > summary { cursor: pointer; font-weight: 600; }
.tri-meds-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.tri-medmatch {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--prn-warning-bg);
    color: var(--prn-warning);
}

/* ── Suivis (conclusion + liste en attente) ── */
.tri-followup label input[type="text"],
.tri-dest input[type="text"] {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface);
    color: inherit;
}
.tri-note textarea {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface);
    color: inherit;
    font: inherit;
    resize: vertical;
}
.tri-note textarea:focus-visible,
.tri-followup label input[type="text"]:focus-visible,
.tri-dest input[type="text"]:focus-visible {
    outline: 2px solid var(--tri-accent);
    outline-offset: 1px;
    border-color: var(--tri-accent);
}
.tri-fu-list ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.tri-fu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--prn-line-soft);
    font-size: 0.9rem;
}
.tri-fu:last-child { border-bottom: none; }
.tri-fu em { opacity: 0.75; font-style: normal; }
.tri-fu--overdue em { color: var(--prn-warning); font-weight: 700; }
.tri-fu-actions { display: inline-flex; gap: 0.5rem; align-items: center; }
.tri-fu-actions .btn { padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.tri-fu-count { font-weight: 400; opacity: 0.7; font-size: 0.85rem; }

/* ── Silhouette corporelle (module partagé js/body-map.js, préfixe tri-bm) ── */
.tri-bodymap {
    margin: 0.75rem 0 0.25rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    padding: 0.55rem 0.9rem;
    background: var(--prn-surface-2);
}
.tri-bodymap > summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--prn-ink-soft);
}
.tri-bodymap[open] > summary { color: var(--prn-navy); }
.tri-bodymap-figs {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(0.5rem, 4vw, 2.5rem);
    flex-wrap: wrap;
    margin: 0.7rem auto 0.4rem;
}
.tri-bodymap-fig {
    margin: 0;
    width: min(132px, 38vw);
}
.tri-bodymap-fig figcaption {
    margin-top: 0.15rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
    opacity: 0.75;
}
.tri-bm-svg { width: 100%; height: auto; display: block; }
.tri-bm-region {
    fill: color-mix(in srgb, var(--tri-accent) 8%, var(--prn-surface));
    stroke: color-mix(in srgb, var(--tri-accent) 38%, transparent);
    stroke-width: 1.4;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.12s ease, stroke 0.12s ease;
}
.tri-bm-region:hover {
    fill: color-mix(in srgb, var(--tri-accent) 26%, var(--prn-surface));
    stroke: var(--tri-accent);
}
.tri-bm-region:focus-visible {
    outline: none;
    stroke: var(--tri-accent);
    stroke-width: 2.4;
}
.tri-bm-region.is-sel {
    fill: color-mix(in srgb, var(--tri-accent) 55%, var(--prn-surface));
    stroke: var(--tri-accent);
    stroke-width: 1.6;
}

/* ── Groupes (plaintes combinées) ── */
.tri-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1.1rem 0 0.5rem;
    font-size: 1.02rem;
}
.tri-hidden-note {
    font-size: 0.85rem;
    opacity: 0.8;
}
.tri-linkbtn {
    background: none;
    border: none;
    padding: 0;
    color: var(--tri-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-size: inherit;
}
.tri-linkbtn:hover { text-decoration-thickness: 2px; }

/* ── Scores cliniques ── */
.tri-score-pts {
    margin-left: auto;
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}
.tri-score-total {
    margin: 0.7rem 0 0;
    font-size: 1rem;
}
.tri-score-verdict {
    font-weight: 700;
}
.tri-score-legend {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

/* ── Historique / statistiques ── */
.tri-history {
    margin-top: 1.25rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    padding: 0.65rem 0.95rem;
    font-size: 0.9rem;
    background: var(--prn-surface-2);
}
.tri-history summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--prn-ink-soft);
}
.tri-history-stats {
    margin: 0.5rem 0 0;
}
.tri-history-list {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}
.tri-history-list span {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}
.tri-history-clear {
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
}

/* ── Recherche — porte d'entrée principale, volontairement visible ── */
.tri-search {
    margin: 0.85rem 0 1rem;
}
.tri-search-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--prn-navy);
}
.tri-search input[type="search"] {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1.02rem;
    border: 1.5px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.tri-search input[type="search"]::placeholder { color: var(--prn-muted); }
.tri-search input[type="search"]:hover { border-color: var(--tri-accent-hover); }
.tri-search input[type="search"]:focus {
    outline: none;
    border-color: var(--tri-accent);
    box-shadow: 0 0 0 3px var(--tri-accent-bg);
}
.tri-empty {
    padding: 0.85rem 1rem;
    border: 1px dashed var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface-2);
    color: var(--prn-ink-soft);
}

/* ── Grille des plaintes — items compacts et scannables ── */
.tri-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.55rem;
}
.tri-complaint {
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    color: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    column-gap: 0.6rem;
    align-items: center;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.tri-complaint:hover {
    border-color: var(--tri-accent-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.tri-complaint:focus-visible {
    outline: 2px solid var(--tri-accent);
    outline-offset: 2px;
}
.tri-complaint.is-selected {
    border-color: var(--tri-accent-border);
    background: var(--tri-accent-bg);
    box-shadow: inset 0 0 0 1.5px var(--tri-accent-border);
}
.tri-complaint .tri-emoji {
    font-size: 1.3rem;
    display: inline-block;
    grid-row: 1 / span 2;
    align-self: center;
}
.tri-complaint-ic {
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    color: var(--tri-accent);
}
.tri-complaint-ic .prn-icon,
.tri-complaint-ic .prn-icon svg {
    width: 1.55rem;
    height: 1.55rem;
}
.tri-complaint strong {
    grid-column: 2;
    align-self: end;
    line-height: 1.25;
    font-size: 0.95rem;
}
.tri-complaint p {
    grid-column: 2;
    align-self: start;
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--prn-muted);
}
/* Carte sans sous-titre : le titre se centre sur toute la hauteur. */
.tri-complaint strong:only-of-type { grid-row: 1 / span 2; align-self: center; }

/* ── Signaux d'alarme ── */
.tri-flags {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.tri-flag {
    border: 1px solid var(--prn-line);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    background: var(--prn-surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.12s ease;
}
.tri-flag:hover { box-shadow: var(--shadow-sm); }
.tri-flag--urgent { border-left-color: var(--prn-danger); }
.tri-flag--md { border-left-color: var(--prn-warning); }
.tri-flag--pharm { border-left-color: var(--prn-success); }
.tri-flag--pharm.is-checked { background: var(--prn-success-bg); }
.tri-alert--pharm { border-left: 4px solid var(--prn-success); }
.tri-flag.is-checked { background: var(--prn-danger-bg-soft); }
.tri-flag--md.is-checked { background: var(--prn-warning-bg); }
.tri-flag-main {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    cursor: pointer;
}
.tri-flag-main input {
    margin-top: 0.25rem;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--tri-accent);
}
.tri-flag-main strong { line-height: 1.4; }

/* Niveau de signal : petite pastille colorée (au lieu d'un texte gris) */
.tri-tier {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    vertical-align: 0.06em;
}
.tri-flag--urgent .tri-tier,
.tri-guided.tri-flag--urgent .tri-tier {
    background: var(--prn-danger-bg);
    color: var(--prn-danger);
}
.tri-flag--md .tri-tier,
.tri-guided.tri-flag--md .tri-tier {
    background: var(--prn-warning-bg);
    color: var(--prn-warning);
}
.tri-flag--pharm .tri-tier,
.tri-guided.tri-flag--pharm .tri-tier {
    background: var(--prn-success-bg);
    color: var(--prn-success);
}

/* Question à poser au comptoir (« 💬 Comment le demander ») — encadré doux */
.tri-ask {
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--prn-surface-2);
    border: 1px solid var(--prn-line-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.tri-why {
    margin: 0.45rem 0 0 1.85rem;
    font-size: 0.9rem;
}
.tri-why summary {
    cursor: pointer;
    color: var(--tri-accent-text);
    font-weight: 600;
}
.tri-why p {
    margin: 0.4rem 0 0;
    line-height: 1.5;
}
.tri-cautions ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}
.tri-cautions li {
    border-left: 3px solid var(--prn-success);
    padding-left: 0.75rem;
}
.tri-cautions p {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}
.tri-caution-esc { color: var(--prn-warning); }
.tri-alert { margin-top: 0.5rem; }

/* ── Questions différentielles (cartes cons-card, cohérentes avec le site) ── */
.tri-question {
    margin: 0 0 1rem;
}
.tri-q-hint {
    margin: 0.1rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--prn-muted);
}
.tri-opts {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.tri-opt {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    text-align: left;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    color: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.tri-opt:hover {
    border-color: var(--tri-accent-hover);
    box-shadow: var(--shadow-sm);
}
.tri-opt:focus-visible {
    outline: 2px solid var(--tri-accent);
    outline-offset: 2px;
}
.tri-opt.is-selected {
    border-color: var(--tri-accent-border);
    background: var(--tri-accent-bg);
    box-shadow: inset 0 0 0 1.5px var(--tri-accent-border);
}
.tri-opt-check {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.12rem;
    border: 2px solid var(--prn-muted);
    border-radius: 50%;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.tri-opt[role="checkbox"] .tri-opt-check { border-radius: 5px; }
.tri-opt.is-selected .tri-opt-check {
    border-color: var(--tri-accent-border);
    background:
        radial-gradient(circle at center, var(--tri-accent-border) 0 45%, transparent 50%);
}
.tri-opt[role="checkbox"].is-selected .tri-opt-check {
    background: var(--tri-accent-border);
}
.tri-opt-body strong {
    display: block;
    line-height: 1.4;
}
.tri-opt-dest {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--prn-line);
    background: var(--prn-surface-2);
    color: var(--prn-ink-soft);
}
.tri-opt-dest--refer {
    border-color: color-mix(in srgb, var(--prn-warning) 45%, transparent);
    color: var(--prn-warning);
}

/* Impression clinique — justification de l'orientation retenue */
.tri-impression {
    margin: 0.8rem 0 0;
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--tri-accent) 30%, var(--prn-line));
    border-left: 4px solid var(--tri-accent);
    border-radius: var(--radius);
    background: var(--tri-accent-bg);
    font-size: 0.92rem;
    line-height: 1.5;
}
.tri-impression--refer {
    border-color: color-mix(in srgb, var(--prn-warning) 35%, var(--prn-line));
    border-left-color: var(--prn-warning);
    background: var(--prn-warning-bg);
}
.tri-impression-head {
    margin: 0 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-weight: 700;
    color: var(--prn-navy);
}
.tri-impression-dest {
    opacity: 0.85;
    font-weight: 600;
}
.tri-impression p { margin: 0.3rem 0 0; }
.tri-impression-note {
    opacity: 0.85;
    font-size: 0.87rem;
}

/* ── Conclusion ── */
.tri-reasons li { margin-bottom: 0.6rem; }
.tri-routes {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.tri-route {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    background: var(--prn-surface);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.tri-route:hover {
    border-color: var(--tri-accent-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.tri-route .tri-emoji {
    font-size: 1.5rem;
    flex: none;
}
.tri-route-ic {
    flex: none;
    display: inline-flex;
    color: var(--tri-accent);
}
.tri-route-ic .prn-icon,
.tri-route-ic .prn-icon svg {
    width: 1.9rem;
    height: 1.9rem;
}
.tri-route p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--prn-muted);
}
.tri-route-why {
    color: var(--prn-ink-soft) !important;
    font-size: 0.88rem !important;
}
.tri-route strong { line-height: 1.35; }
.tri-route-arrow {
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--tri-accent);
}
.tri-safety { margin-top: 1rem; }

/* (mobile : la grille passe à 2 colonnes compactes — règle dans la section
   « Polish visuel » en fin de fichier) */

/* ── Rôles (pharmacien / technicien / étudiant) ── */
.tri-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
}

/* ── Glossaire : terme décoré + infobulle CSS (survol / focus / tap) ── */
.prn-gloss {
    position: relative;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
    outline: none;
}
.prn-gloss:hover,
.prn-gloss:focus {
    background: var(--tri-accent-bg);
    border-radius: 3px;
}
.prn-gloss:hover::after,
.prn-gloss:focus::after {
    content: attr(data-gloss);
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 50;
    width: max(240px, 28ch);
    max-width: 72vw;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface);
    color: var(--prn-ink);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: var(--shadow-lg);
    white-space: normal;
}

/* ── Mode guidé (étape 2) — une question à la fois ──────────────────────
   La carte guidée est le cœur du mode technicien/étudiant : niveau du signal
   en pastille, progression visible, et deux réponses équilibrées où « Non —
   absent » est le ton calme et « Oui — présent » prend la couleur du niveau
   (rouge/ambre/vert) — plutôt qu'un gros bouton teal sur la réponse alarmante. */
.tri-guided-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--prn-line);
    border-radius: 999px;
    background: var(--prn-surface-2);
    font-size: 0.88rem;
    cursor: pointer;
}
.tri-guided-toggle input { accent-color: var(--tri-accent); }

.triage-page .tri-guided {
    padding: 1rem 1.15rem 1.15rem;
    border: 1px solid var(--prn-line);
    border-left-width: 5px;
    border-radius: var(--radius);
    background: var(--prn-surface);
    box-shadow: var(--shadow-sm);
    margin: 0.2rem 0 0;
}
.tri-guided.tri-flag--urgent { border-left-color: var(--prn-danger); }
.tri-guided.tri-flag--md { border-left-color: var(--prn-warning); }
.tri-guided.tri-flag--pharm { border-left-color: var(--prn-success); }
.tri-guided-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}
.tri-guided-count {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--prn-muted);
    font-variant-numeric: tabular-nums;
}
.tri-guided-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--prn-line-soft);
    overflow: hidden;
    margin: 0 0 0.75rem;
}
.tri-guided-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tri-accent);
    transition: width 0.2s ease;
}
.tri-guided-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--prn-ink-soft);
}
.tri-guided-q {
    font-size: 1.2rem;
    line-height: 1.45;
    margin: 0.15rem 0 0.5rem;
    color: var(--prn-navy);
    font-weight: 700;
}
.tri-guided .tri-q-hint { margin: 0 0 0.9rem; }
.tri-guided-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.tri-guided-btn {
    padding: 0.85rem 1rem;
    min-height: 3rem;
    border: 1.5px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.tri-guided-btn:hover { box-shadow: var(--shadow-sm); }
.tri-guided-btn:focus-visible { outline: 2px solid var(--tri-accent); outline-offset: 2px; }
/* « Non — absent » : réponse rassurante — ton calme (teal). */
.tri-guided-btn--no:hover {
    border-color: var(--tri-accent-hover);
    background: var(--tri-accent-bg);
}
/* « Oui — présent » : réponse à conséquence — prend la couleur du niveau. */
.tri-guided.tri-flag--urgent .tri-guided-btn--yes {
    border-color: color-mix(in srgb, var(--prn-danger) 55%, var(--prn-line));
    color: var(--prn-danger);
}
.tri-guided.tri-flag--urgent .tri-guided-btn--yes:hover {
    background: var(--prn-danger-bg); border-color: var(--prn-danger);
}
.tri-guided.tri-flag--md .tri-guided-btn--yes {
    border-color: color-mix(in srgb, var(--prn-warning) 55%, var(--prn-line));
    color: var(--prn-warning);
}
.tri-guided.tri-flag--md .tri-guided-btn--yes:hover {
    background: var(--prn-warning-bg); border-color: var(--prn-warning);
}
.tri-guided.tri-flag--pharm .tri-guided-btn--yes {
    border-color: color-mix(in srgb, var(--prn-success) 55%, var(--prn-line));
    color: var(--prn-success);
}
.tri-guided.tri-flag--pharm .tri-guided-btn--yes:hover {
    background: var(--prn-success-bg); border-color: var(--prn-success);
}
.tri-guided-back { display: inline-block; margin-top: 0.85rem; }
@media (max-width: 430px) {
    .tri-guided-choices { grid-template-columns: 1fr; }
}

/* ── Mode collecte (technicien) ─────────────────────────────────────────
   L'alerte « AVISEZ IMMÉDIATEMENT LE PHARMACIEN » est le moment critique :
   bannière rouge franche, titre en gras rouge, barre latérale épaisse. */
.triage-page .tri-alert--tech {
    border: 1px solid var(--prn-danger);
    border-left-width: 5px;
    background: var(--prn-danger-bg);
    box-shadow: var(--shadow-sm);
}
.triage-page .tri-alert--tech h3 {
    color: var(--prn-danger);
    font-size: 1.08rem;
    margin: 0;
    line-height: 1.4;
}
.tri-collector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.7rem;
}
.tri-collector label { font-weight: 600; font-size: 0.9rem; }
.tri-collector input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-sm);
    background: var(--prn-surface);
    color: inherit;
    width: 8rem;
}
.tri-collector input:focus-visible {
    outline: 2px solid var(--tri-accent);
    outline-offset: 1px;
    border-color: var(--tri-accent);
}

/* ── Formation : progression + à revoir ── */
.frm-progress { font-weight: 400; opacity: 0.8; font-size: 0.88rem; }
.frm-missed { margin: 0 0 0.9rem; font-size: 0.9rem; }
.frm-missed > summary { cursor: pointer; font-weight: 600; }
.frm-missed ul { margin: 0.4rem 0; padding-left: 1.1rem; }
.frm-missed li { margin-bottom: 0.3rem; }

/* ── Barre de contexte patient (étapes 2-4) ─────────────────────────────
   Rappel permanent du QUI (profil pertinent) + QUOI (plaintes retenues),
   avec retour direct à l'étape 1 (« Modifier »). */
.tri-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.8rem;
    border: 1px solid var(--prn-line);
    border-left: 3px solid var(--tri-accent);
    border-radius: var(--radius);
    background: var(--prn-surface-2);
    padding: 0.55rem 0.85rem;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.tri-context-who { font-weight: 600; color: var(--prn-navy); }
.tri-context-what {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.tri-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--tri-accent-border);
    background: var(--tri-accent-bg);
    color: var(--tri-accent-text);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
    font-weight: 600;
}
.tri-context-chip .prn-icon,
.tri-context-chip .prn-icon svg { width: 0.95rem; height: 0.95rem; }
.tri-context-edit { margin-left: auto; white-space: nowrap; }

/* ── Aide « pourquoi Continuer est désactivé » (barre d'actions) ──────── */
.triage-page .voyage-actions { flex-wrap: wrap; }
.tri-next-hint {
    flex-basis: 100%;
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--prn-muted);
    text-align: right;
    line-height: 1.4;
}

/* ── Étape 3 : questions encore sans réponse ────────────────────────────── */
.tri-question--todo { border-left: 3px solid var(--tri-accent); }
.tri-todo-badge {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--tri-accent-text);
    background: var(--tri-accent-bg);
    border: 1px solid var(--tri-accent-border);
    border-radius: 999px;
    padding: 0.08rem 0.55rem;
    vertical-align: middle;
}
.tri-flash { animation: tri-flash-kf 1.4s ease-out 1; }
@keyframes tri-flash-kf {
    0% { box-shadow: 0 0 0 5px var(--tri-accent-bg); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Compteur de plaintes retenues (n / max) ────────────────────────────── */
.tri-selected-count {
    font-weight: 700;
    opacity: 0.75;
    font-size: 0.85rem;
}

/* ── Récapitulatif des éléments cliniques retenus (conclusion) ─────────── */
.tri-recap {
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface-2);
    padding: 0.7rem 0.95rem;
    margin: 0.85rem 0;
    font-size: 0.92rem;
}
.tri-recap > summary { cursor: pointer; font-weight: 600; }
.tri-recap-counts { font-weight: 400; opacity: 0.75; font-size: 0.85rem; }
.tri-recap-body { margin-top: 0.5rem; }
.tri-recap-body h4 {
    margin: 0.6rem 0 0.2rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.tri-recap-body p { margin: 0.3rem 0; line-height: 1.55; }
.tri-recap-neg { opacity: 0.85; }

/* ── Polish visuel (audit par captures, 2026-07-19) ─────────────────────── */

/* Légende du profil : sur 2 lignes (mobile), le texte chevauchait la bordure
   du fieldset — un fond opaque assorti au fieldset la détache proprement. */
.tri-profile legend {
    background: var(--prn-surface-2);
    border-radius: 6px;
    padding: 0.1rem 0.5rem;
    max-width: 100%;
}

/* Une puce ne se casse jamais en deux lignes (« 48-72 h », « 1 semaine ») —
   c'est le conteneur qui passe à la ligne ENTRE les puces. */
.tri-chip { white-space: nowrap; }
.tri-profile-group { flex-wrap: wrap; }

/* Conclusion : le verdict porte l'écran — titre un cran plus affirmé,
   davantage encore pour l'orientation urgente. */
.triage-page .tri-result h3 { font-size: 1.08rem; }
.triage-page .cons-card-absolute.tri-result h3 { font-size: 1.18rem; letter-spacing: 0.01em; }

@media (max-width: 560px) {
    /* Grille des plaintes : 62 cartes — DEUX colonnes compactes (page ~40 %
       plus courte qu'en une colonne), sous-titre borné à 2 lignes. */
    .tri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
    .tri-complaint {
        padding: 0.55rem 0.6rem;
        grid-template-columns: 1.3rem 1fr;
        column-gap: 0.45rem;
        align-items: start;
    }
    .tri-complaint-ic .prn-icon,
    .tri-complaint-ic .prn-icon svg { width: 1.15rem; height: 1.15rem; }
    .tri-complaint .tri-emoji { font-size: 1rem; }
    /* min-width:0 + césure : un mot long (« Étourdissements ») ne doit pas
       déborder de sa colonne étroite. */
    .tri-complaint strong,
    .tri-complaint p { min-width: 0; overflow-wrap: anywhere; }
    .tri-complaint strong {
        font-size: 0.85rem;
        line-height: 1.25;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .tri-complaint p {
        font-size: 0.74rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Carte de consultation proposée : icône et flèche cédaient trop de
       largeur au détriment du texte — icône réduite, flèche retirée (toute
       la carte est cliquable), le texte respire. */
    .tri-route { gap: 0.6rem; padding: 0.8rem 0.85rem; }
    .tri-route-ic .prn-icon,
    .tri-route-ic .prn-icon svg { width: 1.5rem; height: 1.5rem; }
    .tri-route .tri-emoji { font-size: 1.25rem; }
    .tri-route-arrow { display: none; }
    /* Relance : le champ des initiales occupe sa propre ligne, aligné. */
    .tri-followup .tri-profile-row label {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .tri-followup .tri-profile-row label input { flex: 1; min-width: 0; }
}

/* ── Mode formation : lisibilité des choix ──────────────────────────────── */
.frm-choices-title {
    margin: 0.9rem 0 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--prn-navy);
}
.frm-choice { transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
.frm-choice:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}