/* ============================================================================
   Pro Re Nata — MPOC : consultation unique sur le socle suivi (arc 2, D698)
   et peau du module (passe esthétique, D672).
   ----------------------------------------------------------------------------
   Réutilise les briques partagées (.prn-chip / .prn-mc, accordéon .prn-acc,
   cartes .suivi-*, éditeur .prn-rx-*, décisions PRN_SUIVI_DECISIONS) — patron
   asthme.css. Ce fichier ne porte que la peau, la mise en page du portrait
   (préfixe mp-), le produit retenu et la brique de décisions (mp-dec).
   ----------------------------------------------------------------------------
   PEAU D'ACCENT — ardoise (owner, QCM 2026-10-09, verbatim « Ardoise
   (Recommandé) »). Choix d'identité assumé — la fumée et le poumon chronique,
   distincte du bleu acier de l'asthme (#245775), du teal des actions du site,
   du rouge HTA/IC et des violets endocriniens — ne pas « corriger » par zèle :
     · --mpoc-accent        → bordures, anneaux, pastilles, fonds teintés,
                              barre de progression (#475569 = 7,6:1 sur blanc) ;
     · --mpoc-accent-strong → tout TEXTE d'accent et le canal de sélection
                              (#334155 = 10,4:1 sur blanc) ;
       en sombre #94a3b8 / #cbd5e1 sous l'encre du thème.
   Le teal reste la couleur des actions génériques (boutons primaires).
   La peau atteint le volet par les canaux des briques partagées : sélection
   (--prn-int-*), accordéon (--prn-acc-accent*), volet suivi
   (--suivi-accent*), « Portée et sources » (--portee-accent).
   Couleur = sens : les signes d'alerte gardent le rouge du site ; fond
   teinté + bord COMPLET teinté, jamais de liseré latéral.
   ============================================================================ */

.mpoc-page {
    --mpoc-accent: #475569;
    --mpoc-accent-strong: #334155;
    --mpoc-accent-soft: color-mix(in srgb, var(--mpoc-accent) 7%, var(--prn-surface, #fff));
    --mpoc-accent-line: color-mix(in srgb, var(--mpoc-accent) 35%, var(--prn-surface, #fff));
    --prn-int-hover-bg: var(--mpoc-accent-soft);
    --prn-int-hover-border: var(--mpoc-accent);
    --prn-int-selected-bg: color-mix(in srgb, var(--mpoc-accent) 10%, var(--prn-surface, #fff));
    --prn-int-selected-border: var(--mpoc-accent-strong);
    --prn-int-strong: var(--mpoc-accent-strong);
    --prn-int-strong-on: #ffffff;
    --prn-int-text: var(--mpoc-accent-strong);
    --prn-acc-accent: var(--mpoc-accent);
    --prn-acc-accent-strong: var(--mpoc-accent-strong);
    --prn-acc-accent-soft: var(--mpoc-accent-soft);
    --prn-acc-accent-line: var(--mpoc-accent-line);
}
[data-theme="dark"] .mpoc-page {
    --mpoc-accent: #94a3b8;
    --mpoc-accent-strong: #cbd5e1;
    --mpoc-accent-soft: color-mix(in srgb, var(--mpoc-accent) 12%, transparent);
    --mpoc-accent-line: color-mix(in srgb, var(--mpoc-accent) 40%, transparent);
    --prn-int-selected-bg: color-mix(in srgb, var(--mpoc-accent) 16%, var(--prn-surface, #0f1720));
    --prn-int-strong-on: #0f172a;
}
.mpoc-page .page-header h1 { color: var(--mpoc-accent-strong); }
.mpoc-page .page-header { --portee-accent: var(--mpoc-accent); }
.mpoc-page .progress-bar { background: var(--mpoc-accent); }
.mpoc-page [id$="SuiviStepWrap"] {
    --suivi-accent: var(--mpoc-accent-strong);
    --suivi-accent-soft: var(--mpoc-accent-soft);
    --suivi-accent-strong: var(--mpoc-accent-strong);
}
/* Un sous-titre de puce cochée reste lisible en sombre (AA) — patron asthme.css. */
[data-theme="dark"] .mpoc-page [id$="SuiviStepWrap"] label.is-selected .prn-chip-sub,
[data-theme="dark"] .mpoc-page [id$="SuiviStepWrap"] label.is-selected .prn-mc-sub { color: var(--prn-ink-soft); }
.mpoc-page .source-note { font-size: 12px; color: var(--prn-muted); margin-top: 6px; font-style: italic; }
/* Un seul indicateur de progression : le stepper libellé dit déjà l'étape. */
.mpoc-page #mpocSuiviStepWrap .step-label { display: none; }
/* Titres de cartes du volet en serif à l'accent — éditeur d'ordonnance compris
   (sinon seul titre marine de l'étape 3, patron asthme.css). */
.mpoc-page .suivi-card h3,
.mpoc-page .cons-card h3,
[data-theme="dark"] .mpoc-page .cons-card h3 { font-family: var(--font-serif); color: var(--mpoc-accent-strong); }

/* ── Portrait ─────────────────────────────────────────────────────── */
.mp-help { margin: 0.2rem 0 0.7rem; font-size: 0.82rem; color: var(--prn-muted); line-height: 1.45; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 320px)); gap: 0.6rem 0.8rem; margin: 0.5rem 0 0.7rem; }
.mp-grid-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0.45rem; }
/* Les cinq puces courtes des exacerbations tiennent une rangée dès la tablette.
   (Tour 2, E2 : une règle `.mpoc-page .mp-grid-checks` du lot 6 de l'arc 4,
   plus spécifique, l'écrasait — la 5e puce tombait seule sur sa ligne.) */
.mp-grid-checks--compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
/* Tour 2, E2 — grilles sans orpheline : colonnes ajustées au nombre
   d'options (`round(up, n / round(up, n / 4))`, recette diabète R2), au
   bureau seulement ; les cinq niveaux mMRC sur une ligne. */
@media (min-width: 900px) {
    .mp-grid-checks.mp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-grid-checks.mp-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mp-grid-checks.mp-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Tour 2, E1 — l'âge et « Fumeur actif » partagent une rangée, contrôles
   alignés au bas de la rangée. */
.mp-row-duo { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 24rem); gap: 0.6rem 0.8rem; align-items: end; margin: 0.5rem 0 0.7rem; }
.mp-row-duo .p-field { margin: 0; }
@media (max-width: 560px) { .mp-row-duo { grid-template-columns: 1fr; } }
.mp-gap { margin-top: 0.8rem; }
.mp-sub { margin-top: 0.9rem; }
.mp-sub-title { margin: 1rem 0 0.45rem; font-size: 0.85rem; font-weight: 700; color: var(--mpoc-accent-strong); }
.mp-step1 .prn-mc-sub,
.mp-step1 .prn-chip-sub { display: block; }
.mp-step1 .p-field,
.mp-choice .p-field { display: flex; flex-direction: column; gap: 0.25rem; }
.mp-step1 .p-field > span,
.mp-choice .p-field > span { font-size: 0.78rem; color: var(--prn-muted); font-weight: 600; }
/* 16 px (anti-zoom iOS) et cibles de 44 px ; aucun contrôle natif nu. */
.mp-step1 input[type="text"],
.mp-choice select,
.mp-choice input[type="text"] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--prn-line-strong);
    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;
}
.mp-step1 input:focus-visible,
.mp-choice select:focus-visible,
.mp-choice input:focus-visible { outline: 2px solid var(--mpoc-accent); outline-offset: 1px; }
/* Régime et groupe DÉRIVÉS, dits en mots : bloc teinté de l'accent. */
.mp-derived {
    margin: 0.8rem 0 0.2rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--mpoc-accent-line);
    border-radius: var(--radius);
    background: var(--mpoc-accent-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}
.mp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.8rem 0 0.2rem; }
.mp-act .btn { min-height: 44px; max-width: 100%; white-space: normal; text-align: left; }
.mp-cat-result { margin: 0; font-size: 0.9rem; }
.mp-action-hint { margin: 1.2rem 0 0; text-align: center; font-size: 0.82rem; color: var(--prn-muted); font-weight: 600; }
.mp-action-hint:empty { display: none; }

/* ── Étape 2 : produit retenu par le pharmacien (P10) ─────────────── */
.mpoc-page .mp-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.5rem 1rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--prn-line); }
.mpoc-page .mp-choice [hidden] { display: none; }

/* ── Décisions par carte (brique partagée PRN_SUIVI_DECISIONS) ─────── */
.mpoc-page .mp-decisions .mp-dec-sub { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--prn-muted); }
.mpoc-page .mp-dec-opts { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.mpoc-page .mp-dec-opt { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; cursor: pointer; }
/* Tour 2, E4 : le bouton radio porte la peau (ardoise), jamais le bleu natif —
   depuis le 2026-10-18 (D960-D961) par la pilule DESSINÉE du socle (suivi.css,
   --suivi-accent = ardoise) ; l'`accent-color` d'une radio native est purgé. */
/* Tour 2, E6 : au mobile, les trois choix restent sur une rangée (cibles de
   44 px gardées), libellé « Décision » aligné à gauche. */
.mpoc-page .mp-dec-inline { text-align: left; }
@media (max-width: 480px) {
    /* Pilules dessinées (socle, D960-D961) : une rangée d'écart quand elles s'enroulent. */
    .mpoc-page .mp-dec-opts { gap: 0.4rem 0.6rem; }
    .mpoc-page .mp-dec-opt { min-height: 44px; }
}
.mpoc-page .mp-dec-reason { display: block; margin-top: 0.45rem; font-size: 0.85rem; }
.mpoc-page .mp-dec-reason[hidden] { display: none; }
.mpoc-page .mp-dec-linked { display: block; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--prn-muted); }
.mpoc-page .mp-dec-linked[hidden] { display: none; }
.mpoc-page .mp-dec-row[data-dec-linked-on] .mp-dec-opt { opacity: 0.55; cursor: not-allowed; }
.mpoc-page .mp-dec-reason input {
    width: 100%;
    min-height: 44px;
    margin-top: 0.2rem;
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    border: 1px solid var(--prn-line-strong);
    border-radius: 8px;
    background: var(--prn-surface, #fff);
    color: inherit;
}
.mpoc-page .mp-dec-reason input:focus-visible { outline: 2px solid var(--mpoc-accent); outline-offset: 1px; }
.mpoc-page .suivi-rec .mp-dec-inline {
    margin-top: 0.6rem;
    padding: 0.55rem 0 0;
    border: none;
    border-top: 1px dashed var(--prn-line);
    border-radius: 0;
}
.mpoc-page .mp-dec-lead {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mpoc-accent-strong);
    align-self: center;
}
/* Le geste écarté s'estompe par APLATISSEMENT (jamais sous AA) — l'état reste dit en mots. */
.mpoc-page .suivi-rec[data-dec-status] > .suivi-rec-rationale,
.mpoc-page .suivi-rec[data-dec-status] > .suivi-rec-rows,
.mpoc-page .suivi-rec[data-dec-status] > .suivi-rec-src {
    color: var(--prn-muted);
    filter: grayscale(1);
}
.mpoc-page .mp-dec-recap { margin: 0.2rem 0 0; padding-left: 1.15rem; }
.mpoc-page .mp-dec-recap li { margin-bottom: 0.45rem; line-height: 1.5; }
.mpoc-page .mp-dec-recap-why { margin-top: 0.15rem; }
.mpoc-page .mp-dec-recap-why > summary { font-size: 0.82rem; cursor: pointer; }
.mpoc-page .mp-dec-recap-reason { color: var(--prn-muted); }

/* Rythme vertical des étapes 2-3 (patron asthme.css). */
.mpoc-page .suivi-rec { margin: 0 0 1.1rem; padding: 1rem 1.15rem; }
.mpoc-page .suivi-card { margin: 0 0 1.15rem; padding: 1rem 1.15rem; }
.mpoc-page .suivi-card > :last-child { margin-bottom: 0; }
.mpoc-page .mp-dec-row { margin-bottom: 0.6rem; }

/* ── Mobile (arc 4, K10) : rien ne déborde à 320 px ───────────────────
   Noms de produits longs (« Fluticasone furoate/uméclidinium/vilantérol »)
   coupés au besoin plutôt que sortis de la carte ; éditeur d'ordonnance à
   deux pistes, une seule au mobile (recette asthme.css, répliquée). */
.mpoc-page .prn-mc-title,
.mpoc-page .suivi-rec h3,
.mpoc-page .mp-decisions strong,
.mpoc-page .prn-rx-drug strong { overflow-wrap: anywhere; min-width: 0; }
.mpoc-page .mp-choice { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
/* Tour 2, E5 : Quantité et Renouvellements à leur taille, côte à côte. */
.mpoc-page .prn-rx-editor .prn-rx-fields { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 9rem) minmax(0, 1fr); gap: 0.6rem 1rem; }
.mpoc-page .prn-rx-editor .prn-rx-fields > :has([data-rx-field="posology"]) { grid-column: 1 / -1; }
.mpoc-page .prn-rx-editor .prn-rx-fields input { width: 100%; min-width: 0; }
@media (max-width: 560px) {
    .mpoc-page .prn-rx-editor .prn-rx-fields { grid-template-columns: 1fr; }
}
/* À 320 px, les gouttières imbriquées (conteneur, coquille, carte, rangée)
   laissaient 151 px au champ Quantité : resserrées au très petit écran. */
@media (max-width: 400px) {
    .mpoc-page .voyage-shell { padding-left: 0.5rem; padding-right: 0.5rem; }
    .mpoc-page .prn-rx-editor.cons-card { padding-left: 0.75rem; padding-right: 0.75rem; }
    .mpoc-page .prn-rx-editor .prn-rx-row { padding-left: 0.5rem; padding-right: 0.5rem; }
}