/* ============================================================================
   Pro Re Nata — Revue de médication : peau du module
   ----------------------------------------------------------------------------
   IDENTITÉ ASSUMÉE, documentée ici pour ne pas être « corrigée » par zèle
   (#477, #510) : l'accent de ce module est un INDIGO froid. Chaque module a
   sa peau délibérée — rouge cardio pour HTA, teal pour les actions génériques
   du site — et l'indigo dit ici ce que le module est : un travail d'inventaire
   et d'arbitrage, pas une urgence. La revue est la seule consultation du
   dépôt dont la sortie normale peut être « rien à changer » ; une teinte
   d'alarme mentirait sur son propos.

   PUR CSS sur les briques partagées : classes et ids inchangés, runners
   intouchés. Tout est scopé `.revue-page` — rien ici ne peut fuir sur une
   autre page.

   La couleur ne porte JAMAIS seule une information : chaque pastille de
   verdict porte son MOT, et la teinte ne fait que la redoubler. Tokens +
   `color-mix()` pour que le thème sombre se décline au lieu de se coder à la
   main — et le premier pourcentage de `color-mix()` est celui de la PREMIÈRE
   couleur.
   ============================================================================ */

.revue-page {
    --rev-accent: #4f46e5;
    --rev-accent-soft: color-mix(in srgb, var(--rev-accent) 12%, #fff);
    --rev-accent-line: color-mix(in srgb, var(--rev-accent) 34%, #fff);
    --rev-ok: #0f766e;
    --rev-warn: #b45309;
    --rev-high: #b91c1c;
    --rev-muted: color-mix(in srgb, currentColor 55%, transparent);
}

:root:not([data-theme="light"]) .revue-page {
    --rev-accent: #a5b4fc;
    --rev-accent-soft: color-mix(in srgb, var(--rev-accent) 16%, #0b1020);
    --rev-accent-line: color-mix(in srgb, var(--rev-accent) 40%, #0b1020);
    --rev-ok: #5eead4;
    --rev-warn: #fbbf24;
    --rev-high: #fca5a5;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .revue-page {
        --rev-accent: #a5b4fc;
        --rev-accent-soft: color-mix(in srgb, var(--rev-accent) 16%, #0b1020);
        --rev-accent-line: color-mix(in srgb, var(--rev-accent) 40%, #0b1020);
        --rev-ok: #5eead4;
        --rev-warn: #fbbf24;
        --rev-high: #fca5a5;
    }
}
:root[data-theme="dark"] .revue-page {
    --rev-accent: #a5b4fc;
    --rev-accent-soft: color-mix(in srgb, var(--rev-accent) 16%, #0b1020);
    --rev-accent-line: color-mix(in srgb, var(--rev-accent) 40%, #0b1020);
    --rev-ok: #5eead4;
    --rev-warn: #fbbf24;
    --rev-high: #fca5a5;
}

.revue-page .prn-acc-head .prn-acc-num { background: var(--rev-accent-soft); color: var(--rev-accent); }
.revue-page .progress-bar { background: var(--rev-accent); }

/* Une règle de classe du module a une spécificité SUPÉRIEURE à `[hidden]` de
   l'agent utilisateur : sans cette ligne, un `el.hidden = true` reste sans
   effet visible et l'état ment sur ce que l'écran montre. Mesuré le
   2026-09-15 sur la note « hors catalogue » — masquée dans l'état, visible à
   l'écran. */
.revue-page [hidden] { display: none !important; }

/* ── Ouverture en silence ──────────────────────────────────────────────── */
.revue-page .rev-intro {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rev-accent-line);
    border-radius: 10px;
    background: var(--rev-accent-soft);
    line-height: 1.5;
}

/* ── La grille de régime ───────────────────────────────────────────────── */
/* Seule exception au « zéro débordement horizontal » : un tableau dense a le
   droit de défiler DANS SON PROPRE conteneur, jamais de faire défiler la
   page. */
.revue-page .rev-grid-wrap {
    overflow-x: auto;
    /* Le conteneur défilant doit aussi être le BLOC CONTENANT des descendants
       positionnés : les libellés `.prn-sr-only` des cellules (position:
       absolute) prenaient sinon pour référence un ancêtre hors du conteneur
       et faisaient déborder le document entier (scrollWidth 1 036 px à
       390 px de large, mesuré le 2026-09-16). L'animation d'entrée de l'étape
       (transform sur .prn-step) masquait ce défaut en servant de bloc
       contenant ; il est apparu dès que le mode « mouvement réduit » a
       réellement atteint le navigateur des tests. */
    position: relative;
}

.revue-page .rev-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.4rem;
    /* Pistes FIXES : les colonnes s'alignent d'une rangée à l'autre, ce qui
       est ce qui rend une grille lisible en diagonale. */
    table-layout: fixed;
    min-width: 62rem;
}
.revue-page .rev-grid th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rev-muted);
    padding: 0 0.5rem 0.25rem;
}
.revue-page .rev-grid th:nth-child(1) { width: 22%; }
.revue-page .rev-grid th:nth-child(2) { width: 12%; }
.revue-page .rev-grid th:nth-child(3) { width: 20%; }
.revue-page .rev-grid th:nth-child(4) { width: 16%; }
.revue-page .rev-grid th:nth-child(5) { width: 16%; }
.revue-page .rev-grid th:nth-child(6) { width: 12%; }
.revue-page .rev-grid th:nth-child(7) { width: 2.5rem; }

.revue-page .rev-row > td {
    background: var(--surface, #fff);
    border-top: 1px solid var(--rev-accent-line);
    border-bottom: 1px solid var(--rev-accent-line);
    padding: 0.5rem;
    vertical-align: top;
}
.revue-page .rev-row > td:first-child {
    border-left: 1px solid var(--rev-accent-line);
    border-radius: 8px 0 0 8px;
}
.revue-page .rev-row > td:last-child {
    border-right: 1px solid var(--rev-accent-line);
    border-radius: 0 8px 8px 0;
}
/* Une ligne hors catalogue se voit : ce qu'on perd sur elle, c'est le détail,
   et le pharmacien doit savoir laquelle. */
.revue-page .rev-row-libre > td { border-style: dashed; }

.revue-page .rev-grid input[type="text"],
.revue-page .rev-grid select {
    width: 100%;
    /* ≥ 16px : anti-zoom iOS. */
    font-size: 1rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--rev-accent-line);
    border-radius: 6px;
    background: transparent;
    color: inherit;
}
.revue-page .rev-grid select + select { margin-top: 0.3rem; }
.revue-page .rev-unite { font-size: 0.8rem; color: var(--rev-muted); margin-left: 0.25rem; }
.revue-page .rev-libre-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--rev-warn);
}
.revue-page .rev-prn { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.85rem; }
.revue-page .rev-prn input { width: auto; }
.revue-page .rev-sig { display: block; font-size: 0.85rem; line-height: 1.35; }

/* Pastille de verdict — le MOT d'abord, la teinte ensuite. */
.revue-page .rev-verdict {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid currentColor;
}
.revue-page .rev-verdict[data-sev="ok"]   { color: var(--rev-ok); }
.revue-page .rev-verdict[data-sev="warn"] { color: var(--rev-warn); }
.revue-page .rev-verdict[data-sev="high"] { color: var(--rev-high); }

.revue-page .rev-del {
    border: 1px solid var(--rev-accent-line);
    background: transparent;
    color: inherit;
    border-radius: 6px;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    font-size: 1.1rem;
    cursor: pointer;
}
.revue-page .rev-del:hover { border-color: var(--rev-high); color: var(--rev-high); }

.revue-page .rev-vide {
    margin: 0.75rem 0;
    color: var(--rev-muted);
    line-height: 1.5;
}
.revue-page .rev-grid-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.85rem 0 0;
}
.revue-page .rev-compteurs {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rev-accent);
}

/* ── Champs du portrait ────────────────────────────────────────────────── */
.revue-page .rev-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}
.revue-page .rev-f { display: flex; flex-direction: column; gap: 0.25rem; }
.revue-page .rev-f > span { font-size: 0.78rem; font-weight: 600; color: var(--rev-muted); }
.revue-page .rev-f input,
.revue-page .rev-f select {
    font-size: 1rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--rev-accent-line);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    /* Un champ ne dépasse jamais sa cellule, quel que soit son contenu. */
    min-width: 0;
}
.revue-page .rev-derive {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--rev-accent-soft);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.revue-page .rev-derive > span { color: var(--rev-muted); font-size: 0.85rem; }

.revue-page .rev-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.4rem 1rem;
}
.revue-page .rev-case {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    /* ≥ 44px de cible tactile, en comptant le padding. */
    min-height: 2.75rem;
    padding: 0.25rem 0;
    line-height: 1.35;
}

.revue-page .rev-bilans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.5rem 1rem;
}
.revue-page .rev-bilan {
    display: grid;
    grid-template-columns: 1fr 5rem 9rem;
    align-items: center;
    gap: 0.4rem;
}
.revue-page .rev-bilan > span { font-size: 0.85rem; }
.revue-page .rev-bilan input {
    font-size: 1rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--rev-accent-line);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    min-width: 0;
}

/* ── Contexte de la revue ──────────────────────────────────────────────── */
.revue-page .rev-motifs {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    background: var(--rev-accent-soft);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.revue-page .rev-motifs-lab { color: var(--rev-muted); font-size: 0.85rem; }
.revue-page .rev-chips {
    border: 1px solid var(--rev-accent-line);
    border-radius: 10px;
    padding: 0.6rem 0.85rem 0.85rem;
    margin: 0 0 0.85rem;
}
.revue-page .rev-chips legend {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rev-accent);
    padding: 0 0.35rem;
}
/* Le sélectionné se voit au premier coup d'œil, le non-sélectionné s'estompe
   sans devenir illisible. */
.revue-page .rev-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    margin: 0.2rem 0.4rem 0.2rem 0;
    padding: 0.25rem 0.7rem 0.25rem 0.5rem;
    border: 1px solid var(--rev-accent-line);
    border-radius: 999px;
    cursor: pointer;
}
.revue-page .rev-chip:has(input:checked) {
    background: var(--rev-accent-soft);
    border-color: var(--rev-accent);
    font-weight: 650;
}
.revue-page .rev-sub { margin: 0 0 0.85rem; }
.revue-page .rev-sub-lab {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rev-muted);
    margin-bottom: 0.35rem;
}

/* ── Cartes de décision ────────────────────────────────────────────────── */
.revue-page .rev-keep {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    font-weight: 650;
}
/* Une carte écartée reste LISIBLE : elle est tracée, pas effacée. */
.revue-page .suivi-rec.rev-ecartee { opacity: 0.62; }
.revue-page .suivi-rec.rev-ecartee .suivi-rec-head h3 { text-decoration: line-through; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .revue-page .rev-bilan { grid-template-columns: 1fr 4.5rem 8rem; }
    .revue-page .rev-grid-actions { flex-direction: column; align-items: stretch; }
    .revue-page .rev-compteurs { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .revue-page * { transition: none !important; animation: none !important; }
}