/* ============================================================
   Domivae — dv-legal : bloc d'information légale (CDC #56, #562)

   Le droit affiché LÀ OÙ LA QUESTION SE POSE. Rendu par
   app/Views/_shared/_legal_note.php, contenu piloté depuis
   /admin/textes-de-loi.

   Trois partis pris, tous délibérés :
   - AUCUN JavaScript. Le repli/dépli est un <details> natif : pas de
     gestionnaire en attribut (#533), rien qui puisse rester inerte faute
     de lecteur servi, et le bloc marche dans une page imprimée.
   - Fallbacks en dur (#…) derrière chaque var() : la feuille est chargée
     par page_asset() donc elle suit le bloc partout, y compris sous
     layouts/site.php qui n'importe pas app.css.
   - Sobre. Ce bloc informe, il n'alerte pas : ni fond corail, ni bordure
     épaisse. Il doit pouvoir cohabiter avec un formulaire sans le dominer.
   ============================================================ */

.dv-legal {
    margin: 0 0 1rem;
    border: 1px solid var(--color-border, #E5E7EB);
    border-left: 3px solid var(--color-canard, #007E85);
    border-radius: 8px;
    background: var(--color-bg-soft, #FBFBFB);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text, #1E1E1E);
}

.dv-legal__q {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-marine, #011D2D);
    list-style: none;
}

/* Le chevron par défaut de Safari/Chrome ne se style pas ; on le remplace. */
.dv-legal__q::-webkit-details-marker { display: none; }
.dv-legal__q::marker { content: ''; }

.dv-legal__q-icon {
    flex: 0 0 auto;
    color: var(--color-canard, #007E85);
    line-height: 1.4;
}

.dv-legal__q-text { flex: 1 1 auto; min-width: 0; }

/* Chevron maison, purement décoratif (aria caché par nature : pseudo-élément). */
.dv-legal__q::after {
    content: '';
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.35rem;
    border-right: 2px solid var(--color-text-muted, #717171);
    border-bottom: 2px solid var(--color-text-muted, #717171);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.dv-legal[open] > .dv-legal__q::after { transform: rotate(-135deg); margin-top: 0.6rem; }

.dv-legal__q:hover { background: rgba(0, 126, 133, 0.05); }
.dv-legal__q:focus-visible { outline: 2px solid var(--color-canard, #007E85); outline-offset: -2px; }

.dv-legal__body { padding: 0 0.9rem 0.9rem; }

.dv-legal__lead {
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}

.dv-legal__part { margin: 0 0 0.85rem; }
.dv-legal__part:last-of-type { margin-bottom: 0.5rem; }

.dv-legal__h {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted, #717171);
}

/* « Ce qui n'est PAS obligatoire » : c'est la partie qui fait tomber
   l'objection, elle mérite d'être trouvable d'un coup d'œil — sans crier. */
.dv-legal__part--free .dv-legal__h { color: var(--color-canard-dark, #005F65); }
.dv-legal__part--us .dv-legal__h { color: var(--color-canard-dark, #005F65); }

.dv-legal__body p { margin: 0 0 0.5rem; }
.dv-legal__body ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.dv-legal__body li { margin-bottom: 0.25rem; }

.dv-legal__sources { list-style: none; padding-left: 0; }
.dv-legal__sources li {
    padding-left: 0.9rem;
    text-indent: -0.9rem;
    color: var(--color-text-muted, #717171);
}
.dv-legal__sources a { color: var(--color-canard-dark, #005F65); }

.dv-legal__tag {
    display: inline-block;
    margin-right: 0.3rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: var(--color-blue-pastel, #E3F5F5);
    color: var(--color-canard-dark, #005F65);
    font-size: 0.7rem;
    font-weight: 600;
    text-indent: 0;
}

.dv-legal__note { font-style: italic; }

.dv-legal__foot {
    margin: 0.75rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border, #E5E7EB);
    font-size: 0.78rem;
    color: var(--color-text-muted, #717171);
}

.dv-legal__date { font-weight: 600; }

/* PWA / mobile : le bloc doit tenir à ~390 px sans déborder. */
@media (max-width: 480px) {
    .dv-legal { font-size: 0.86rem; }
    .dv-legal__q { padding: 0.6rem 0.7rem; }
    .dv-legal__body { padding: 0 0.7rem 0.7rem; }
}

/* Impression : le bloc doit être LU, pas replié. Un état des lieux ou un
   mandat imprimé emporte avec lui le droit qui le justifie. */
@media print {
    .dv-legal { break-inside: avoid; background: transparent; }
    .dv-legal__q::after { display: none; }
    .dv-legal > .dv-legal__body { display: block !important; }
    .dv-legal__sources a { text-decoration: none; }
}