/* ============================================================================
   Pro Re Nata — Styles spécifiques à la consultation Contraception orale
   d'urgence (COU). À charger après components.css + voyage.css.

   N.B. — On réutilise au maximum les classes partagées :
     - .prn-mc, .prn-chip (versions LABEL définies dans voyage.css)
     - .prn-callout-* (components.css)
     - .prn-pat-card (components.css)
   ============================================================================ */

/* Couleur d'accent (rose santé reproductive) */
.cou-page { --cou-accent: #b13a8c; --cou-accent-soft: #fdf3f8; --cou-accent-line: #f4cae0; }

.cou-page .page-header h1 { color: var(--cou-accent); }
.cou-page .progress-bar {
    background: linear-gradient(90deg, var(--cou-accent), #f0a8d0);
}

/* ── Blocs de questions ─────────────────────────────────────────────── */
.cou-block {
    margin: 1rem 0 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--prn-surface);
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
}
.cou-block-emph {
    background: var(--cou-accent-soft);
    border-color: var(--cou-accent-line);
}
.cou-block h3 {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    color: var(--cou-accent);
    font-weight: 700;
    font-family: var(--font-sans);
}
.cou-help {
    margin: 0 0 0.7rem;
    font-size: 0.82rem;
    color: var(--prn-muted);
    line-height: 1.45;
}
.cou-block-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

/* Inputs : 16px iOS no-zoom + 44pt tap targets */
.cou-block .p-field { display: flex; flex-direction: column; gap: 0.25rem; }
.cou-block .p-field > span {
    font-size: 0.78rem;
    color: var(--prn-muted);
    font-weight: 600;
}
.cou-block input[type="number"],
.cou-block input[type="text"],
.cou-block input[type="date"] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--prn-line);
    border-radius: var(--radius);
    font-size: 16px;
    font-family: inherit;
    color: var(--prn-navy);
    background: var(--prn-surface);
    min-height: 44px;
    box-sizing: border-box;
}
.cou-block input:focus {
    outline: none;
    border-color: var(--cou-accent);
    box-shadow: 0 0 0 3px rgba(177, 58, 140, 0.15);
}

/* ── Inducteurs (grille compacte) ───────────────────────────────────── */
.cou-inducers {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem !important;
}
label.prn-mc.cou-mc-compact {
    padding: 0.55rem 0.7rem;
    min-height: 44px;
}
label.prn-mc.cou-mc-compact .prn-mc-title { font-size: 0.85rem; }

/* ── Drapeaux rouges (étape 2) ──────────────────────────────────────── */
label.prn-mc.cou-flag-blocking.is-selected {
    border-color: var(--prn-danger);
    background: var(--prn-danger-bg-soft);
}
label.prn-mc.cou-flag-blocking.is-selected .prn-check-box {
    background: var(--prn-danger);
    border-color: var(--prn-danger);
}
label.prn-mc.cou-flag-warn.is-selected {
    border-color: var(--prn-warning);
    background: var(--prn-warning-bg);
}
label.prn-mc.cou-flag-warn.is-selected .prn-check-box {
    background: var(--prn-warning);
    border-color: var(--prn-warning);
}

/* ── Cartes recommandation (étape 3) ────────────────────────────────── */
.cou-recos { display: flex; flex-direction: column; gap: 0.85rem; }
.cou-section-h3 {
    margin: 0.4rem 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cou-accent);
    font-weight: 700;
}
.cou-section-h3-alt { color: var(--prn-muted); }

.cou-card {
    border: 1px solid var(--prn-line);
    border-left: 4px solid var(--prn-line);
    border-radius: var(--radius);
    background: var(--prn-surface);
    padding: 0.9rem 1rem 1rem;
    transition: border-color 0.2s, background 0.2s;
}
.cou-card-first { border-left-color: var(--cou-accent); background: var(--cou-accent-soft); }
.cou-card-cu    { border-left-color: #3a78c8; background: #eef6ff; }
.cou-card-chosen {
    box-shadow: 0 0 0 2px var(--cou-accent) inset;
    border-color: var(--cou-accent);
}
.cou-card-cu.cou-card-chosen {
    box-shadow: 0 0 0 2px #3a78c8 inset;
    border-color: #3a78c8;
}
.cou-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.cou-card-icon { font-size: 1.6rem; line-height: 1.2; }
.cou-card-title-wrap { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cou-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--prn-navy);
    font-family: var(--font-serif);
}
.cou-card-rank {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--prn-muted);
    letter-spacing: 0.04em;
    font-weight: 600;
}
.cou-card-first .cou-card-rank { color: var(--cou-accent); }
.cou-card-cu .cou-card-rank    { color: #3a78c8; }

.cou-card-btn {
    min-height: 40px;
    padding: 0.45rem 1rem;
    font-size: 0.86rem;
    flex-shrink: 0;
}
.cou-card-body { font-size: 0.9rem; color: var(--prn-ink); }
.cou-card-meta {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
}
.cou-card-meta li { display: flex; align-items: baseline; gap: 0.3rem; }
.cou-card-meta strong {
    color: var(--prn-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.cou-card-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}
.cou-card-list li {
    padding: 0.2rem 0 0.2rem 1.15rem;
    position: relative;
}
.cou-card-list-reasons li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--prn-success);
    font-weight: 700;
}
.cou-card-list-cautions li {
    color: #b13a17;
}
.cou-card-list-cautions li::before {
    content: "⚠";
    position: absolute;
    left: 0;
}

/* ── Étape 4 — bloc posologie ───────────────────────────────────────── */
.cou-rx-summary {
    background: var(--cou-accent-soft);
    border: 1px solid var(--cou-accent-line);
    border-left: 4px solid var(--cou-accent);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.cou-rx-summary h3 {
    margin: 0 0 0.5rem;
    color: var(--cou-accent);
    font-size: 1rem;
    font-family: var(--font-serif);
}
.cou-rx-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}
.cou-rx-summary ul li {
    padding: 0.2rem 0;
}
.cou-rx-summary ul strong {
    color: var(--prn-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    margin-right: 0.4rem;
}

/* ── Étape 5 — listes conseils ──────────────────────────────────────── */
.cou-list-bullets {
    margin: 0.4rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.cou-list-bullets li { padding: 0.15rem 0; }

.cou-pharma { background: #f8fafa; border-color: var(--prn-line); }

/* ── Bouton Recommencer (header) ────────────────────────────────────── */
.cou-reset { margin-left: auto; }

/* ── Bloc « Patiente mineure » (étape 1) ────────────────────────────── */
.cou-minor h3 {
    color: #b13a17;
}
.cou-minor {
    border-color: #f0c5b8;
    background: #fdf3ef;
}

/* ── Autres RSnP du cycle (étape 2) ─────────────────────────────────── */
.cou-other-upsi-list {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.cou-other-upsi-row {
    border: 1px solid var(--prn-line);
    border-left: 3px solid var(--cou-accent);
    border-radius: var(--radius);
    background: var(--cou-accent-soft);
    padding: 0.65rem 0.8rem;
}
.cou-other-upsi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
}
.cou-other-upsi-head strong {
    color: var(--cou-accent);
    font-weight: 700;
}
.cou-remove-btn {
    background: transparent;
    border: 1px solid var(--prn-line);
    color: var(--prn-muted);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.75rem;
    min-height: 30px;
    transition: border-color 0.2s, color 0.2s;
}
.cou-remove-btn:hover {
    border-color: #b13a17;
    color: #b13a17;
}
.cou-add-btn {
    margin-top: 0.4rem;
    font-size: 0.85rem;
}
.cou-upsi-badge {
    margin-top: 0.5rem;
    font-size: 0.82rem;
}

/* ── Méthode hormonale (étape 3) ─────────────────────────────────────── */
.cou-method-details {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--prn-line);
}
label.prn-mc.cou-method-chip {
    padding: 0.55rem 0.75rem;
}
label.prn-mc.cou-method-chip .prn-mc-title { font-size: 0.88rem; }

/* ── Carte Cu-IUD bloquée (étape 4) ─────────────────────────────────── */
.cou-card-blocked {
    border-left-color: var(--prn-danger);
    background: var(--prn-danger-bg-soft);
}
.cou-card-blocked .cou-card-title { color: var(--prn-danger); }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cou-block { padding: 0.7rem 0.85rem; }
    .cou-block h3 { font-size: 0.88rem; }
    .cou-block-grid { grid-template-columns: 1fr; }
    .cou-card-head { flex-wrap: wrap; }
    .cou-card-btn { width: 100%; margin-top: 0.4rem; }
    .cou-card-icon { font-size: 1.3rem; }
    .cou-card-title { font-size: 0.95rem; }
    .cou-inducers { grid-template-columns: 1fr 1fr; }
    .cou-other-upsi-head { flex-wrap: wrap; gap: 0.3rem; }
}

/* ── Dark mode ─────────────────────────────────────────────────────── */
[data-theme="dark"] .cou-page,
:root:not([data-theme="light"]) .cou-page {
    --cou-accent: #e894c8;
}
[data-theme="dark"] .cou-page .cou-block,
:root:not([data-theme="light"]) .cou-page .cou-block {
    background: var(--prn-surface-2);
}
[data-theme="dark"] .cou-page .cou-block-emph,
:root:not([data-theme="light"]) .cou-page .cou-block-emph {
    background: rgba(177, 58, 140, 0.10);
    border-color: rgba(177, 58, 140, 0.25);
}
[data-theme="dark"] .cou-card,
:root:not([data-theme="light"]) .cou-card {
    background: var(--prn-surface-2);
}
[data-theme="dark"] .cou-card-first,
:root:not([data-theme="light"]) .cou-card-first {
    background: rgba(177, 58, 140, 0.10);
}
[data-theme="dark"] .cou-card-cu,
:root:not([data-theme="light"]) .cou-card-cu {
    background: rgba(95, 150, 212, 0.10);
    border-left-color: #7db3e8;
}
[data-theme="dark"] .cou-card-cu .cou-card-rank,
:root:not([data-theme="light"]) .cou-card-cu .cou-card-rank {
    color: #7db3e8;
}
[data-theme="dark"] .cou-card-cu.cou-card-chosen,
:root:not([data-theme="light"]) .cou-card-cu.cou-card-chosen {
    box-shadow: 0 0 0 2px #7db3e8 inset;
    border-color: #7db3e8;
}
[data-theme="dark"] .cou-rx-summary,
:root:not([data-theme="light"]) .cou-rx-summary {
    background: rgba(177, 58, 140, 0.10);
    border-color: rgba(177, 58, 140, 0.25);
}
[data-theme="dark"] .cou-pharma,
:root:not([data-theme="light"]) .cou-pharma {
    background: var(--prn-surface-2);
}
[data-theme="dark"] .cou-page .cou-minor,
:root:not([data-theme="light"]) .cou-page .cou-minor {
    background: rgba(217, 83, 79, 0.10);
    border-color: rgba(217, 83, 79, 0.30);
}
[data-theme="dark"] .cou-other-upsi-row,
:root:not([data-theme="light"]) .cou-other-upsi-row {
    background: rgba(177, 58, 140, 0.10);
}
[data-theme="dark"] .cou-card-blocked,
:root:not([data-theme="light"]) .cou-card-blocked {
    background: rgba(217, 83, 79, 0.10);
}
[data-theme="dark"] .cou-card-list-cautions li,
:root:not([data-theme="light"]) .cou-card-list-cautions li {
    color: var(--prn-warning);
}
[data-theme="dark"] .cou-minor h3,
:root:not([data-theme="light"]) .cou-minor h3 {
    color: #fca5a5;
}
[data-theme="dark"] .cou-remove-btn:hover,
:root:not([data-theme="light"]) .cou-remove-btn:hover {
    border-color: var(--prn-danger);
    color: var(--prn-danger);
}
[data-theme="dark"] label.prn-mc.cou-flag-blocking.is-selected .prn-check-box,
[data-theme="dark"] label.prn-mc.cou-flag-warn.is-selected .prn-check-box,
:root:not([data-theme="light"]) label.prn-mc.cou-flag-blocking.is-selected .prn-check-box,
:root:not([data-theme="light"]) label.prn-mc.cou-flag-warn.is-selected .prn-check-box {
    color: var(--prn-int-strong-on);
}