/* ============================================
   PITCHU SANTÉ - PrEP injectable (V3)
   Complète budget.css (variables, boutons, modales, toasts)
   ============================================ */

.sante-main {
    max-width: 900px;
    margin: 0 auto;
}

/* ============================================
   SÉLECTEUR DE PERSONNE
   ============================================ */
.sante-people {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sante-person {
    padding: 0.45rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sante-person:hover { background: var(--bg-card-hover); }

.sante-person.active.pawel {
    background: var(--pawel-light);
    border-color: var(--pawel);
    color: var(--pawel);
}

.sante-person.active.seb {
    background: var(--seb-light);
    border-color: var(--seb);
    color: var(--seb);
}

/* ============================================
   CARTE « PROCHAINE INJECTION »
   ============================================ */
.next-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 5px solid var(--text-muted);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.next-card.ok     { border-left-color: var(--accent-green); }
.next-card.warn   { border-left-color: var(--accent-amber); }
.next-card.urgent { border-left-color: #fb923c; }
.next-card.late   { border-left-color: var(--accent-red); }

.next-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.next-card-icone { font-size: 1.9rem; line-height: 1; }

.next-card-head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.next-card-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.next-window {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 0.9rem;
}

.next-window-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.next-window-dates {
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--text);
}

.next-window-dates strong { color: var(--accent); }

.next-card.late .next-window-dates strong { color: var(--accent-red); }

.next-window-ideal {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* ---- Ligne « RDV déjà prévu » sous une fenêtre ---- */
.next-rdv {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.9rem;
    font-size: 0.88rem;
}

.next-rdv.ok {
    background: var(--accent-green-light);
    border: 1px solid var(--accent-green);
    color: #14532d;
}

.next-rdv.ok.hors {
    background: var(--accent-amber-light);
    border-color: var(--accent-amber);
    color: #92400e;
}

.next-rdv.none {
    background: var(--bg);
    border: 1px dashed var(--border);
    color: var(--text-secondary);
}

.next-rdv-icone { font-size: 1.05rem; line-height: 1.4; }
.next-rdv-corps { flex: 1; min-width: 0; }

.next-rdv-lieu,
.next-rdv-labo {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}

.next-rdv-alerte {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

.badge-inj {
    background: var(--accent-light);
    color: var(--accent);
}

/* ---- Bloc « injection d'après » (repliable) ---- */
.next-suivante {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    margin: 1rem 0 0.9rem;
    overflow: hidden;
}

.next-suivante > summary {
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
    user-select: none;
}

.next-suivante > summary::-webkit-details-marker { display: none; }

.next-suivante > summary::after {
    content: '▾';
    float: right;
    transition: transform 0.15s ease;
}

.next-suivante[open] > summary::after { transform: rotate(180deg); }

.next-suivante > summary:hover { background: var(--bg-card-hover); }

.next-suivante-corps {
    padding: 0 0.9rem 0.9rem;
    border-top: 1px solid var(--border);
}

.next-suivante-corps .next-window {
    background: var(--bg-card);
    margin-top: 0.9rem;
}

.next-suivante-corps .next-window-dates { font-size: 1.05rem; }

.next-estimation {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.next-message {
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.next-last {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.next-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.next-card.empty { text-align: left; }

.next-card-error {
    text-align: center;
    color: var(--text-secondary);
    padding: 1.5rem 0;
    line-height: 1.8;
}

/* ============================================
   ONGLETS
   ============================================ */
.sante-tabs {
    display: flex;
    gap: 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.3rem;
    margin-bottom: 1.5rem;
}

.sante-tab {
    flex: 1;
    padding: 0.55rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sante-tab:hover { background: var(--bg-card-hover); }

.sante-tab.active {
    background: var(--accent);
    color: #fff;
}

/* ============================================
   PANNEAUX ET LISTES
   ============================================ */
.sante-count {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.sante-hint {
    font-size: 0.83rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.sante-hint code {
    background: var(--bg);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.sante-empty {
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 2rem 1rem;
    font-size: 0.9rem;
}

.sante-row {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
}

.sante-row-num {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--accent-light);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
}

.sante-row-main { flex: 1; min-width: 0; }

.sante-row-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

/* Majuscule sur le seul jour de la semaine (« Jeudi 23 juillet 2026 ») :
   `capitalize` mettrait aussi une majuscule au mois, ce qui est fautif en français. */
.sante-row-title::first-letter {
    text-transform: uppercase;
}

.sante-row-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.sante-gap, .sante-lieu {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.sante-row-note {
    font-size: 0.83rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    font-style: italic;
}

.sante-row-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.btn-icon-sm {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon-sm:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent);
}

/* ---- RDV ---- */
.badge-manque {
    background: var(--accent-red-light);
    color: var(--accent-red);
}

.rdv-row.manque { border-left: 3px solid var(--accent-red); }
.rdv-row.honore { border-left: 3px solid var(--accent-green); }
.rdv-row.prevu  { border-left: 3px solid var(--accent-blue); }

.rdv-statuer {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.btn-mini {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-full);
    padding: 0.3rem 0.7rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-mini.ok:hover {
    background: var(--accent-green-light);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-mini.ko:hover {
    background: var(--accent-red-light);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* ============================================
   COMPRIMÉS
   ============================================ */
.pill-notice {
    background: var(--accent-amber-light);
    border: 1px solid var(--accent-amber);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.pill-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

.pill-card.active {
    border-color: var(--accent-red);
    border-left: 5px solid var(--accent-red);
}

.pill-card-head {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.pill-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pill-big {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.9rem;
    font-size: 0.95rem;
}

.pill-big.done {
    background: var(--accent-green);
    opacity: 1;
    cursor: default;
}

.pill-streak {
    text-align: center;
    font-weight: 600;
    color: var(--accent-amber);
    margin-top: 0.7rem;
}

/* ============================================
   DIVERS
   ============================================ */
.field-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.sante-disclaimer {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
    margin: 2.5rem auto 1rem;
    max-width: 560px;
}

.sante-modal { max-width: 460px; }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 640px) {
    .next-card { padding: 1.15rem; }
    .next-window-dates { font-size: 1.05rem; }
    .sante-tab { font-size: 0.75rem; padding: 0.5rem 0.25rem; }
    .sante-row { padding: 0.8rem; gap: 0.6rem; }
    .sante-row-num { width: 1.9rem; height: 1.9rem; font-size: 0.7rem; }
    .next-actions .btn-primary,
    .next-actions .btn-secondary { flex: 1; justify-content: center; }
}