/* =====================================================================
   Ulalu — ce qui aide à acheter (sprint 19)
   ---------------------------------------------------------------------
   Le film d'exemple des pages publiques (D-084) et les coordonnées de
   facturation d'une association ou d'une entreprise (D-083).
   Jetons et composants : ulalu.css.
   ===================================================================== */

/* ---------- Film d'exemple ---------- */
.demo-film { display: grid; gap: 1.2rem; }
.demo-film__player {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 72vh;
    border-radius: var(--r-lg);
    background: var(--ink);
    box-shadow: var(--shadow-3);
    display: block;
}
.demo-film__notes { display: grid; gap: .35rem; font-size: var(--t-sm); color: var(--muted-ink); text-align: center; }
.demo-film__notes p { margin: 0; }

/* ---------- Coordonnées de facturation ---------- */
details.billing {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .8rem 1rem;
    background: var(--surface-2);
}
details.billing summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
details.billing[open] summary { margin-bottom: .6rem; }
details.billing textarea { resize: vertical; }

/* « J'ai un code » (D-105) : replié et discret, sous le formulaire. Celui qui paie plein tarif ne doit pas y lire une
   invitation à partir chercher un code ; celui qui en a un le trouve sans le chercher. */
details.promo-entry { margin-top: 1rem; font-size: var(--t-sm); }
details.promo-entry summary { cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; width: fit-content; }
details.promo-entry[open] summary { margin-bottom: .6rem; }
.promo-entry__row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.promo-entry__row input { flex: 1 1 12rem; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
/* Le prix d'origine, barré à côté de « Offert » : on apprécie ce dont on connaît le prix. */
.promo-was { text-decoration: line-through; color: var(--ink-3, var(--ink-2)); font-weight: 400; margin-left: .35em; }