/* ============================================================================
   Pro Re Nata — wizard.css : styles PARTAGÉS des consultations à ordonnance
   (sections patient, bloc thérapeutique/ordonnance, impression Rx, dark mode).
   Extrait de voyage.css (2026-06) — chargé par toutes les pages wizard,
   APRÈS responsive.css et AVANT le CSS du module.
   ============================================================================ */
/* ============================================================================
   Pro Re Nata — Consultation voyage (styles spécifiques)
   ============================================================================ */

.voyage-page .page-header { margin-bottom: 1.75rem; }
.voyage-page .page-header h1 { font-size: 1.85rem; margin-bottom: 0.4rem; }
.voyage-page .page-header .lead { font-size: 1rem; color: var(--prn-ink-soft); line-height: 1.5; }
.voyage-page .page-header .source-note {
    font-size: 0.78rem;
    color: var(--prn-muted);
    margin-top: 0.6rem;
    font-style: italic;
    line-height: 1.5;
}

.voyage-shell {
    background: var(--prn-surface);
    border: 1px solid var(--prn-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* (Tokens de risque définis dans style.css — light + dark) */

/* ── Progress bar ── */
.voyage-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.voyage-progress .progress {
    flex: 1;
    height: 8px;
    background: var(--prn-line);
    border-radius: 4px;
    overflow: hidden;
}
.voyage-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--prn-int-strong), var(--prn-int-hover-border));
    border-radius: 4px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}
.voyage-progress .progress-label {
    font-size: 0.78rem;
    color: var(--prn-navy);
    font-weight: 600;
    white-space: nowrap;
}
.prn-reset-btn {
    background: transparent;
    border: 1px solid var(--prn-line);
    color: var(--prn-muted);
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 100ms ease-out, background-color 100ms ease-out;
    white-space: nowrap;
}
.prn-reset-btn:hover {
    border-color: var(--prn-danger);
    color: var(--prn-danger);
    background: var(--prn-danger-bg-soft);
}

/* ── Step layout ── */
.voyage-step h2,
.prn-step h2 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--prn-navy);
    margin: 0 0 0.25rem;
}
.voyage-step .step-sub,
.prn-step p {
    font-size: 0.85rem;
    color: var(--prn-muted);
    margin: 0 0 1rem;
}

/* ── Radio button cards ── */
.prn-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 2px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: border-color 100ms ease-out, background-color 100ms ease-out;
}
.prn-radio:hover { border-color: var(--prn-int-hover-border); background: var(--prn-int-hover-bg); }
.prn-radio.is-selected,
input[type="radio"]:checked + .prn-radio { border-color: var(--prn-int-strong); background: var(--prn-int-hover-bg); }

/* ── Multi-select checkbox cards ── */
.prn-checkbox {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.75rem 0.95rem;
    border: 2px solid var(--prn-line); border-radius: var(--radius);
    background: var(--prn-surface); cursor: pointer; text-align: left; font-family: var(--font-sans);
    transition: border-color 100ms ease-out, background-color 100ms ease-out;
}
.prn-checkbox:hover { border-color: var(--prn-int-hover-border); background: var(--prn-int-hover-bg); }
.prn-checkbox.is-selected { border-color: var(--prn-int-strong); background: var(--prn-int-hover-bg); }

/* ── Sélection plus lisible : contrôle natif accentué + agrandi ──────────────
   Les cartes radio/checkbox gardent l'input natif (cliquable par les tests),
   mais on le colore (accent-color) et on l'agrandit pour une cible et un état
   « coché » nettement plus visibles. L'état sélectionné gagne une ombre
   d'accent discrète pour le distinguer au premier coup d'œil. */
.prn-radio input[type="radio"],
.prn-checkbox input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--prn-int-strong);
    flex-shrink: 0;
    cursor: pointer;
}
.prn-radio.is-selected,
.prn-checkbox.is-selected {
    box-shadow: inset 0 0 0 1px var(--prn-int-strong);
    font-weight: 600;
}

/* ── Liste de pays en grille responsive ─────────────────────────────────────
   Remplace la longue colonne (un pays par ligne, ~9000 px sur mobile) par une
   grille qui s'adapte à la largeur : ~3 colonnes en desktop, 2 en mobile.
   Tous les .prn-country-item restent visibles et cliquables (le filtre de
   recherche bascule simplement leur display). */
.prn-opts.prn-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.5rem;
}
.prn-country-grid .prn-checkbox {
    padding: 0.6rem 0.75rem;
}
.prn-country-grid .prn-checkbox span {
    font-size: 0.9rem;
    line-height: 1.2;
}
/* Mobile : 2 colonnes fixes (la grille auto-fill ne tient qu'une colonne sous
   ~360 px à cause du padding du wizard). Défini ici — et non dans
   responsive.css, chargé AVANT wizard.css — pour gagner la cascade. */
@media (max-width: 640px) {
    .prn-opts.prn-country-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Selectable card variants — utilisées par oxyures, perinatal, nv ──────
   Restaurées : Sprint 6 avait supprimé les anciens .v-chip / .v-mc en les
   considérant comme orphelins, mais ils étaient toujours utilisés dans
   plusieurs runners (templates JS) avec une structure d'enfants spécifique.
   Sélecteurs scopés à <label> pour ne pas écraser le .prn-chip pill de
   components.css (button) utilisé par PRN_PATIENT_SECTION.
   ============================================================================ */
label.prn-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 2px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--prn-ink);
    transition: border-color 100ms ease-out, background-color 100ms ease-out;
}
label.prn-chip:hover { border-color: var(--prn-int-hover-border); background: var(--prn-int-hover-bg); }
label.prn-chip.is-selected { border-color: var(--prn-int-strong); background: var(--prn-int-hover-bg); }
label.prn-chip .prn-chip-body { flex: 1; }
label.prn-chip .prn-chip-title { font-size: 0.92rem; font-weight: 600; color: var(--prn-navy); }
label.prn-chip .prn-chip-sub { font-size: 0.78rem; color: var(--prn-muted); margin-top: 0.15rem; }
label.prn-chip .prn-radio-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--prn-line);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
label.prn-chip.is-selected .prn-radio-dot { border-color: var(--prn-int-strong); }
label.prn-chip.is-selected .prn-radio-dot::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--prn-int-strong);
}

label.prn-mc {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.75rem 0.95rem;
    border: 2px solid var(--prn-line); border-radius: var(--radius);
    background: var(--prn-surface); cursor: pointer; text-align: left; font-family: var(--font-sans);
    transition: border-color 100ms ease-out, background-color 100ms ease-out;
}
label.prn-mc:hover { border-color: var(--prn-int-hover-border); background: var(--prn-int-hover-bg); }
label.prn-mc.is-selected { border-color: var(--prn-int-strong); background: var(--prn-int-hover-bg); }
label.prn-mc .prn-check-box {
    width: 18px; height: 18px; border-radius: 4px;
    border: 2px solid var(--prn-line); background: var(--prn-surface);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    color: var(--prn-int-strong-on, #fff); font-weight: 700; font-size: 12px;
}
label.prn-mc.is-selected .prn-check-box { background: var(--prn-int-strong); border-color: var(--prn-int-strong); }
label.prn-mc.is-selected .prn-check-box::after { content: "✓"; }
label.prn-mc .prn-mc-body { flex: 1; }
label.prn-mc .prn-mc-title { font-size: 0.9rem; font-weight: 600; color: var(--prn-navy); }
label.prn-mc .prn-mc-sub { font-size: 0.76rem; color: var(--prn-muted); margin-top: 0.15rem; }

/* ── Action bar — sticky en bas (s'adapte au thème via color-mix) ── */
.voyage-actions {
    display: flex; gap: 0.6rem; justify-content: space-between; align-items: center;
    margin-top: 1.5rem;
    position: sticky;
    bottom: 0;
    background: color-mix(in srgb, var(--prn-surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    padding: 0.85rem 0;
    border-top: 1px solid var(--prn-line);
    z-index: 10;
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

@supports not (backdrop-filter: blur(10px)) {
    .voyage-actions { background: var(--prn-surface); }
}
.voyage-actions .btn { min-width: 130px; }
.voyage-actions.start .btn-outline { display: none; }
.voyage-actions.start { justify-content: flex-end; }

/* ── Pied d'actions des résultats ────────────────────────────────────────────
   Reprend le langage visuel de la barre d'actions du wizard (même séparateur
   du design-system, même respiration) pour unifier le pied de page entre les
   étapes de saisie et l'écran de résultats. Volontairement NON sticky : la
   page de résultats est un rapport long et imprimable qu'une barre flottante
   masquerait. */
.voyage-results-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--prn-line);
}

/* ── Results ── */
.prn-results { animation: fadeIn 0.4s ease; }

.prn-results-section {
    background: var(--prn-surface);
    border: 2px solid var(--prn-line);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    margin-bottom: 0.75rem;
}
.prn-results-section h3 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--prn-navy);
    margin: 0 0 0.5rem;
}

/* Listes d'options (étapes) — colonne empilée */
.prn-opts,
.prn-regs,
.prn-alts { display: flex; flex-direction: column; gap: 0.5rem; }

/* Tags */
.prn-tag {
    display: inline-block; padding: 0.25rem 0.6rem; border-radius: 14px;
    font-size: 0.72rem; font-weight: 600; font-family: var(--font-sans);
}
.prn-tag.green { background: var(--prn-int-hover-bg); color: var(--prn-int-strong); }
.prn-tag.red { background: var(--prn-danger-bg); color: #c0392b; }
.prn-tag.orange { background: #fdf6ec; color: #8a5a10; }
.prn-tag.gray { background: var(--prn-line); color: var(--prn-muted); }
.prn-tag.blue { background: var(--prn-blue-light); color: var(--prn-blue); }
.prn-tag.yellow { background: #fefce8; color: #6b5a1e; }

/* ── Ordonnance summary (multi-travelers) ── */
.ord-summary {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #fafdfb;
    border: 1px solid #d4e8e1;
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 1.45;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .voyage-shell { padding: 1.25rem 1rem 1rem; }
    .voyage-actions .btn { min-width: 110px; padding: 0.65rem 1rem; font-size: 0.85rem; }
}

/* ============================================================================
   Composition voyageur — 4 sections par patient
   ============================================================================ */
.prn-pat-card {
    background: var(--prn-surface);
    border: 1px solid var(--prn-line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.prn-pat-card--adult { border-left: 4px solid var(--prn-int-strong); }
.prn-pat-card--kid { border-left: 4px solid var(--prn-blue); }

.prn-pat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--prn-line);
}
.prn-pat-head strong {
    flex: 0 0 auto;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--prn-navy);
}
.prn-pat-head .prn-pat-initials {
    flex: 1;
    max-width: 120px;
    padding: 5px 8px;
    border: 1px solid var(--prn-line);
    border-radius: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 600;
    color: var(--prn-int-strong);
    background: #fafdfb;
}

.prn-kid-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.prn-kid-meta label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--prn-muted);
}
.prn-kid-meta input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--prn-line);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

/* Chaque section (sexe / grossesse / allergie / condition) — alignée prn-pat-section
   Override voyage : padding/border plus compacts qu'en components.css base. */
.prn-pat-section {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #e6ece9;
    border-radius: 10px;
    background: #fbfdfc;
}
.prn-pat-section--sex { background: var(--prn-surface-2); border-color: #d8e7e0; }
.prn-pat-section--preg { background: #fff5f2; border-color: #f0d7cf; }
.prn-pat-section--allergies { background: #fffaf0; border-color: #efe3c4; }
.prn-pat-section--conditions { background: #f4f7fb; border-color: #d6dff0; }

/* Sprint D2 (UI migration) : .prn-section-title / .prn-section-body / .prn-pill /
   .prn-row / .prn-row-label retirés — la step Voyageurs utilise désormais
   PRN_PATIENT_SECTION qui rend <h4> + .prn-chip (composants partagés
   components.css). .prn-pillgroup reste utilisé par PS comme conteneur de chips. */
.prn-pillgroup {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Grille de cases à cocher (allergies / conditions) — overrides voyage
   sur .prn-chk-grid / .prn-chk : compact + accent rouge pour CI/allergies. */
.prn-chk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 5px;
}
.prn-chk {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    background: var(--prn-surface);
    border: 1px solid var(--prn-line);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.3;
    transition: border-color 100ms ease-out, background-color 100ms ease-out;
}
.prn-chk:hover { border-color: var(--prn-int-strong); }
.prn-chk.is-active {
    background: #fdecea;
    border-color: #f5b3aa;
    color: #842029;
    font-weight: 600;
}
.prn-chk input { margin-top: 2px; flex-shrink: 0; accent-color: #d9534f; }
.prn-chk span { flex: 1; }

/* Regroupement thématique des conditions (immunitaire, cardio, hépato-rénal,
   neuro-psy, métabolique, ophto-derma, digestif, musculo, pulmo/altitude).
   Allège visuellement la longue liste de cases à cocher. */
.prn-ci-group { margin-bottom: 8px; }
.prn-ci-group:last-child { margin-bottom: 0; }
.prn-ci-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--prn-muted, #6b7280);
    margin: 6px 0 4px;
    padding-bottom: 2px;
    border-bottom: 1px dashed var(--prn-line, #e5e7eb);
}
.prn-pat-block {
    background: #fafdfb;
    border: 1px solid #e0ebe5;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.prn-pat-block + .prn-pat-block { margin-top: 4px; }
.prn-pat-block-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--prn-int-strong);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--prn-line);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.prn-pat-block-title::first-letter { font-size: 1.05em; }

/* Rx retiré (CI absolue) — ligne discrète, non sélectionnable
   Aligné sur la base de carte unifiée (.prn-rx-row / .prn-rx-info / .prn-vacc-card) */
.prn-rx-removed {
    font-size: 12.5px;
    color: #6c757d;
    background: #f1f3f5;
    border: 1px solid #e2e6ea;
    border-left: 4px solid #adb5bd;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0 0 8px;
    font-style: italic;
    line-height: 1.45;
}
.prn-rx-removed strong {
    color: #495057;
    font-style: normal;
    font-size: 14px;
}

/* Rx à éviter (CI relative) — encadré rouge, sélectionnable */
.prn-rx-avoid {
    margin: 2px 0 8px 26px;
    font-size: 11.5px;
    color: #842029;
    background: #f8d7da;
    border-left: 3px solid #dc3545;
    padding: 5px 8px;
    border-radius: 3px;
}

/* ─── Rx info-only ───────────────────────────────────────────────────────────
   Callout pour les médicaments mentionnés à titre informatif uniquement
   (référence médecin obligatoire). Pas de checkbox, pas d'ajout à
   l'ordonnance imprimée. Aligné sur la base de carte unifiée
   (mêmes padding, radius, bordure gauche que .prn-rx-row / .prn-vacc-card).
   ============================================================================ */
.prn-rx-info {
    font-size: 13px;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #dbe7ff;
    border-left: 4px solid #3b82f6;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0 0 8px;
    line-height: 1.5;
}
.prn-rx-info strong { color: #1e3a8a; }

@media print {
    /* Les callouts info ne doivent jamais apparaître sur l'ordonnance imprimée. */
    .prn-rx-info { display: none !important; }
}

.prn-rx-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 0 8px;
    border: 1px solid var(--prn-line);
    border-radius: 6px;
    background: #ffffff;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.prn-rx-row:hover { background: #f8faf9; }

.prn-rx-row .prn-rx-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    line-height: 1.5;
}
.prn-rx-row .prn-rx-label input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--prn-int-strong);
    cursor: pointer;
}

/* Bloc quantité + bouton refuser à droite */
.prn-rx-row .prn-rx-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
    padding-top: 1px;
}
.prn-rx-row .prn-rx-qty input[type="number"] {
    width: 56px;
    padding: 4px 6px;
    border: 1px solid var(--prn-line);
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: #fff;
}
.prn-rx-row .prn-rx-qty input[type="number"]:focus {
    outline: 2px solid var(--prn-int-strong);
    outline-offset: -1px;
    border-color: var(--prn-int-strong);
}

/* Mobile (≤ 560 px) : empile la zone quantité sous le label pour éviter
   l'étalement horizontal et conserver une touche cible (44 px) confortable. */
@media (max-width: 560px) {
    .prn-rx-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .prn-rx-row .prn-rx-qty {
        width: 100%;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px dashed var(--prn-line);
        margin-top: 2px;
    }
}

/* Impression : on retire les bordures colorées et la couleur de fond pour
   un rendu papier sobre. La ligne reste lisible mais sans aplat coloré. */
@media print {
    .prn-rx-row {
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid #e5e5e5 !important;
        border-radius: 0;
        padding: 4px 0;
        margin-bottom: 2px;
        page-break-inside: avoid;
    }
    .prn-rx-row .prn-rx-qty input { border-color: #ccc !important; }
}

/* Fiche MNP famille */
.prn-mnp-section {
    background: var(--prn-surface-2);
    border: 1px solid #c8d8ce;
}
.prn-mnp-section h3 {
    color: var(--prn-int-strong);
}
.prn-mnp-block {
    background: var(--prn-surface);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-left: 4px solid var(--prn-int-strong);
}
.prn-mnp-title {
    font-weight: 700;
    color: var(--prn-int-strong);
    font-size: 13.5px;
    margin-bottom: 6px;
}
.prn-mnp-list {
    margin: 4px 0 0 20px;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--prn-ink);
}
.prn-mnp-list li { margin-bottom: 4px; }

/* Responsive — colonnes plus petites en mobile */
@media (max-width: 640px) {
    .prn-chk-grid { grid-template-columns: 1fr; }
    .prn-pat-head { flex-wrap: wrap; }
    .voyage-progress { flex-wrap: wrap; }
    .prn-reset-btn { width: 100%; margin-top: 4px; }
}

/* Animation Apple Health : fade + rise discret à chaque step */
.prn-step {
    animation: vStepIn 360ms cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
}
/* Variante quand on revient en arrière : slide subtil depuis la gauche */
[data-step-dir="back"] .prn-step {
    animation: vStepInBack 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .prn-step, [data-step-dir="back"] .prn-step { animation: none; }
}

/* Améliorations sections résultat — meilleure aération */
.prn-results-section + .prn-results-section { margin-top: 0.85rem; }

/* Tags coloré (vert/rouge/orange/jaune) — bg pastel devient bg teinté foncé */
[data-theme="dark"] .prn-tag.red,
:root:not([data-theme="light"]) .prn-tag.red {
    background: rgba(252, 165, 165, 0.10); color: #fca5a5;
}
[data-theme="dark"] .prn-tag.orange,
:root:not([data-theme="light"]) .prn-tag.orange {
    background: rgba(252, 211, 77, 0.10); color: #fcd34d;
}
[data-theme="dark"] .prn-tag.yellow,
:root:not([data-theme="light"]) .prn-tag.yellow {
    background: rgba(254, 240, 138, 0.10); color: #fde68a;
}

/* Sections patient — base sans variante (fond blanc-vert → surface sombre) */
[data-theme="dark"] .prn-pat-section,
:root:not([data-theme="light"]) .prn-pat-section {
    background: var(--prn-surface-2); border-color: var(--prn-line);
}

/* Sections patient (sex/preg/allerg/cond) — pastels remappés */
[data-theme="dark"] .prn-pat-section--sex,
:root:not([data-theme="light"]) .prn-pat-section--sex {
    background: var(--prn-surface-2); border-color: var(--prn-line);
}
[data-theme="dark"] .prn-pat-section--preg,
:root:not([data-theme="light"]) .prn-pat-section--preg {
    background: rgba(252, 165, 165, 0.06); border-color: rgba(252, 165, 165, 0.20);
}
[data-theme="dark"] .prn-pat-section--allergies,
:root:not([data-theme="light"]) .prn-pat-section--allergies {
    background: rgba(252, 211, 77, 0.06); border-color: rgba(252, 211, 77, 0.20);
}
[data-theme="dark"] .prn-pat-section--conditions,
:root:not([data-theme="light"]) .prn-pat-section--conditions {
    background: rgba(95, 150, 212, 0.06); border-color: rgba(95, 150, 212, 0.20);
}

/* ── Lignes Rx (ordonnance / vaccins) — variantes blanches → surface ────────
   Couvre les .prn-rx-row.is-primary / is-alt / is-neutral / is-refused
   + hover/checked. En clair : pastels verts/orange/gris. En dark : teintes
   discrètes sur var(--prn-surface), pour rester lisible sans zone blanche. */
[data-theme="dark"] .prn-rx-row,
:root:not([data-theme="light"]) .prn-rx-row {
    background: var(--prn-surface);
    border-color: var(--prn-line);
}
[data-theme="dark"] .prn-rx-row:hover,
:root:not([data-theme="light"]) .prn-rx-row:hover {
    background: var(--prn-surface-2);
}
[data-theme="dark"] .prn-rx-row .prn-rx-qty input[type="number"],
:root:not([data-theme="light"]) .prn-rx-row .prn-rx-qty input[type="number"] {
    background: var(--prn-surface-2);
    color: var(--prn-ink);
    border-color: var(--prn-line);
}

/* Grille CI/allergies — case cochée : rose pastel → rouge translucide */
[data-theme="dark"] .prn-chk.is-active,
:root:not([data-theme="light"]) .prn-chk.is-active {
    background: var(--prn-danger-bg);
    border-color: rgba(252, 165, 165, 0.35);
    color: var(--prn-danger);
}

/* Blocs patient (sections 💊/🦟/🏔️) — fond blanc-vert → surface sombre */
[data-theme="dark"] .prn-pat-block,
:root:not([data-theme="light"]) .prn-pat-block {
    background: var(--prn-surface-2);
    border-color: var(--prn-line);
}

/* Rx retiré (CI absolue) — gris clair → neutre sombre */
[data-theme="dark"] .prn-rx-removed,
:root:not([data-theme="light"]) .prn-rx-removed {
    background: #1c1f24;
    border-color: var(--prn-line);
    border-left-color: #6b7684;
    color: var(--prn-muted);
}
[data-theme="dark"] .prn-rx-removed strong,
:root:not([data-theme="light"]) .prn-rx-removed strong {
    color: var(--prn-ink-soft);
}

/* Rx à éviter (CI relative) — rose clair → rouge sombre établi */
[data-theme="dark"] .prn-rx-avoid,
:root:not([data-theme="light"]) .prn-rx-avoid {
    background: #2a1414;
    color: #ffe7e7;
    border-left-color: #ff8a8a;
}

/* Rx info-only — bleu pastel → bleu translucide */
[data-theme="dark"] .prn-rx-info,
:root:not([data-theme="light"]) .prn-rx-info {
    background: rgba(147, 197, 253, 0.10);
    border-color: rgba(147, 197, 253, 0.25);
    border-left-color: #93c5fd;
    color: #bfdbfe;
}
[data-theme="dark"] .prn-rx-info strong,
:root:not([data-theme="light"]) .prn-rx-info strong {
    color: #dbeafe;
}

/* Fiche MNP — bordure gris-vert claire → ligne du thème */
[data-theme="dark"] .prn-mnp-section,
:root:not([data-theme="light"]) .prn-mnp-section {
    border-color: var(--prn-line);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vStepIn {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vStepInBack {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Dark mode — remap générique des couleurs inline hardcodées émises par les
   runners (chips, notes : #333…#888) vers les tokens du thème. */
/* Couleurs hardcoded dans les chips PIQ et autres (#333, #444, #888, etc.) */
[data-theme="dark"] [style*="color: #333"],
:root:not([data-theme="light"]) [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
:root:not([data-theme="light"]) [style*="color:#333"],
[data-theme="dark"] [style*="color: #444"],
:root:not([data-theme="light"]) [style*="color: #444"] {
    color: var(--prn-ink) !important;
}
[data-theme="dark"] [style*="color: #555"],
:root:not([data-theme="light"]) [style*="color: #555"],
[data-theme="dark"] [style*="color: #666"],
:root:not([data-theme="light"]) [style*="color: #666"],
[data-theme="dark"] [style*="color: #888"],
:root:not([data-theme="light"]) [style*="color: #888"] {
    color: var(--prn-ink-soft) !important;
}

/* ============================================================================
   Refonte consultations (2026-07) — élévation visuelle PARTAGÉE
   ----------------------------------------------------------------------------
   Chargé par toutes les pages wizard (voyage, hta, dermato, génériques…).
   Objectif : hiérarchie plus nette, titres signés Lora, cartes sélectionnables
   plus tactiles, rythme aéré — sans toucher à la structure des runners.
   Tout passe par les tokens --prn-* → adaptation automatique clair/sombre.
   ============================================================================ */

/* ── En-tête de module : titre signé (Lora), sous-titre à la bonne mesure ── */
.voyage-page .page-header,
.cons-page .page-header { margin-bottom: 2rem; }
.voyage-page .page-header h1,
.cons-page .page-header h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.72rem, 2.6vw, 2.2rem);
    letter-spacing: -0.02em;
    line-height: 1.16;
    text-wrap: balance;
    margin-bottom: 0.5rem;
}
.voyage-page .page-header .lead,
.cons-page .page-header .lead {
    max-width: 70ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--prn-ink-soft);
}
.voyage-page .page-header .eyebrow,
.cons-page .page-header .eyebrow {
    letter-spacing: 0.09em;
    font-size: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--prn-teal) 22%, transparent);
}

/* ── Coquille wizard : profondeur douce, coins généreux ── */
.voyage-shell {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 1.9rem 2rem 1.6rem;
}

/* ── Barre de progression : plus fine, dégradé logo, label discret ── */
.voyage-progress { gap: 1rem; margin-bottom: 1.5rem; }
.voyage-progress .progress { height: 6px; background: var(--prn-line-soft); }
.voyage-progress .progress-bar {
    background: linear-gradient(90deg, var(--logo-teal), var(--logo-aqua));
}
.voyage-progress .progress-label {
    color: var(--prn-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* ── Titres d'étape : Lora, hiérarchie franche ── */
.voyage-step h2,
.prn-step h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--prn-navy);
    line-height: 1.2;
    margin-bottom: 0.4rem;
}
.voyage-step .step-sub,
.prn-step .prn-step-sub,
.prn-step > p:first-of-type {
    font-size: 0.92rem;
    color: var(--prn-muted);
    line-height: 1.55;
    max-width: 66ch;
    margin-bottom: 1.15rem;
}

/* ── Cartes sélectionnables : coins doux, transition, état choisi net ── */
.prn-radio,
.prn-checkbox,
label.prn-chip,
label.prn-mc {
    border-width: 1.5px;
    border-radius: var(--radius-lg);
    transition: border-color var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.prn-radio:hover,
.prn-checkbox:hover,
label.prn-chip:hover,
label.prn-mc:hover { box-shadow: var(--shadow-xs); }
.prn-radio.is-selected,
.prn-checkbox.is-selected,
label.prn-chip.is-selected,
label.prn-mc.is-selected {
    box-shadow: inset 0 0 0 1px var(--prn-int-strong), var(--shadow-xs);
    background: var(--prn-int-selected-bg);
}

/* ── Sections de résultats : profondeur discrète, titres Lora ── */
.prn-results-section {
    border-width: 1px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1.15rem 1.35rem;
}
.prn-results-section h3 {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}