/* Bloc « demi-vie » des pages molécule — BenzoPotes.
   Refonte du 2026-08-17 : la valeur Ashton (métabolites actifs compris) passe en
   tête avec une catégorie courte / moyenne / longue ; la valeur RCP descend dans
   une note dépliable <details>. Les chiffres affichés proviennent exclusivement
   de a/data/demi-vies.json (RCP français + Table 1 du manuel Ashton, chacun
   vérifié dans sa source le 2026-08-17).
   Fichier volontairement séparé d'article.css (chantier parallèle). */

/* Utilitaire absent d'article.css (défini seulement dans css/style.css de
   l'app) : nécessaire pour la caption du tableau Ashton de la page maîtresse. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.dv-bloc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 20px 0;
}
.dv-titre {
    margin: 0 0 12px;
    font-size: 1.08rem;
    color: var(--accent-dark);
}
.dv-titre svg { vertical-align: -3px; margin-right: 4px; }

/* ---- En-tête : badge de catégorie + fourchette Ashton ---- */
.dv-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 10px;
}
.dv-chiffre {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
}
.dv-chiffre strong { font-size: 1.25rem; }
.dv-chiffre-note {
    display: block;
    font-size: .88rem;
    color: var(--muted);
}

/* Badges courte / moyenne / longue. Palette : on reste dans les verts du site
   pour « longue » (c'est la catégorie rassurante), neutre pour « moyenne »,
   ambre doux pour « courte » (attire l'œil sans crier). */
.dv-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.dv-badge--courte {
    background: rgba(191, 111, 42, .12);
    border-color: rgba(191, 111, 42, .45);
    color: #8a4d16;
}
.dv-badge--moyenne {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .18);
    color: var(--muted);
}
.dv-badge--longue {
    background: rgba(45, 106, 79, .12);
    border-color: var(--accent);
    color: var(--accent-dark);
}

/* Ligne métabolite mise en avant (nordazépam & co) : c'est le point que le
   lecteur rate partout ailleurs. */
.dv-metabolite {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .95rem;
    background: rgba(45, 106, 79, .08);
    border: 1px solid var(--accent);
}
.dv-metabolite strong { color: var(--accent-dark); }

/* Liste multi-molécules (page somnifères Z) */
.dv-grille { margin: 0 0 10px; display: grid; gap: 6px; }
.dv-ligne {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .025);
}
.dv-ligne dt {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--muted);
}
.dv-ligne dd { margin: 0; font-size: .98rem; }
@media (min-width: 560px) {
    .dv-ligne {
        grid-template-columns: minmax(150px, 34%) 1fr;
        gap: 12px;
        align-items: baseline;
    }
}

.dv-sens { margin: 10px 0 0; font-size: .95rem; }

/* ---- Note dépliable « Pourquoi le RCP indique … » ---- */
.dv-details {
    margin: 12px 0 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, .02);
}
.dv-details summary {
    padding: 10px 12px;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 600;
    color: var(--accent);
    border-radius: 8px;
    /* on garde le marqueur natif (triangle) : c'est lui qui dit « ça s'ouvre » */
}
.dv-details summary:hover { background: rgba(45, 106, 79, .06); }
.dv-details[open] summary { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.dv-details-corps { padding: 10px 12px; }
.dv-details-corps p { margin: 0 0 8px; font-size: .9rem; line-height: 1.55; }
.dv-details-corps p:last-child { margin-bottom: 0; }

.dv-source { margin: 12px 0 0; font-size: .85rem; color: var(--a-fg-soft, #586a5b); }
.dv-source a { color: var(--accent); }

@media (prefers-color-scheme: dark) {
    .dv-badge--courte {
        background: rgba(229, 165, 107, .14);
        border-color: rgba(229, 165, 107, .5);
        color: #e5a56b;
    }
    .dv-badge--moyenne {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .25);
        color: var(--muted);
    }
    .dv-badge--longue { background: rgba(82, 183, 136, .16); }
    .dv-metabolite { background: rgba(82, 183, 136, .12); }
    .dv-ligne { background: rgba(255, 255, 255, .04); }
    .dv-details { background: rgba(255, 255, 255, .03); }
    .dv-details summary:hover { background: rgba(82, 183, 136, .08); }
    .dv-source { color: var(--muted); }
}

/* Contraste des en-têtes de tableau en thème sombre (palliatif local).
   article.css laisse `.a-tbl th` en blanc sur --accent (#52b788) : 2,47:1,
   sous le seuil WCAG. Mesuré par l'audit mobile du 2026-08-17. On repasse
   l'encre en sombre (~7:1 sur ce vert) sur les pages qui chargent ce fichier,
   en attendant le correctif global dans article.css (autre chantier). */
@media (prefers-color-scheme: dark) {
    .a-tbl th { color: #0b1f0b; }
}