/* Laoud — « Résultats du tirage » (resultats-tirage.html). Blanc pur en clair (QUALITY §7) : cartes blanches à filet, aucun
   aplat gris ; empreintes en chasse fixe, jamais coupées (retour à la ligne) ; cibles d'au moins 44 px. */

.draw-next { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 20px 22px; margin: 8px 0 28px; max-width: var(--measure); }
.draw-next h3 { margin: 0 0 6px; }
.draw-next .when { font-family: 'Lexend', system-ui, sans-serif; font-weight: 600; font-size: 20px; color: var(--text); margin: 0 0 4px; }

.draw-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.draw-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 20px 22px; }
.draw-card:first-child { border-color: var(--border-strong); }
.draw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.draw-head h3 { margin: 0; font-size: 18px; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface); }

.draw-win { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 6px; }
.draw-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 700; font-size: 26px; letter-spacing: 0.04em; color: var(--text); }
.draw-who { font-size: 17px; color: var(--text); }
.draw-counts { font-size: 15px; color: var(--text-muted); margin: 0; }

.hash-list { display: grid; gap: 12px; margin: 12px 0 0; }
.hash-list dt { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.hash-list dd { margin: 2px 0 0; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; word-break: break-all; }
.hash-list dd a { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 15px; word-break: normal; }

.draw-card details { margin-top: 12px; }
.draw-card details .hash-list { padding: 0 18px 16px; }
.draw-card summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--brand-text); }
.draw-card summary:focus-visible, .draw-actions button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.draw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.draw-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.draw-actions button:hover { border-color: var(--brand); }
.draw-actions button:active { background: var(--pressed); }
.draw-actions button[disabled] { cursor: progress; opacity: 0.7; }
.draw-actions .primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.draw-actions .primary:hover { background: var(--brand-pressed); }

.draw-status { margin: 10px 0 0; font-size: 15px; color: var(--text-muted); }
.draw-status.is-ok { font-weight: 600; color: #047857; }
.draw-status.is-ko { font-weight: 600; color: #B91C1C; }
.checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; max-width: var(--measure); }
.checks li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; }
.checks .mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 14px; }
.checks .ok .mark { border: 2px solid #047857; color: #047857; }
.checks .ko .mark { border: 2px solid #B91C1C; color: #B91C1C; }
.checks .verdict { font-weight: 600; }

.draw-loading { color: var(--text-muted); }
.draw-empty, .draw-error { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin: 8px 0 28px; max-width: var(--measure); }
.draw-error { border-color: #B91C1C; }
.draw-error button { margin-top: 10px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }

.formula { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }

@media (prefers-color-scheme: dark) {
  .checks .ok .mark { border-color: #6EE7B7; color: #6EE7B7; }
  .checks .ko .mark, .draw-error { border-color: #FCA5A5; }
  .checks .ko .mark, .draw-status.is-ko { color: #FCA5A5; }
  .draw-status.is-ok { color: #6EE7B7; }
}

@media (prefers-reduced-motion: reduce) {
  .draw-actions button { transition: none; }
}

@media (max-width: 480px) {
  .draw-card, .draw-next { padding: 16px; }
  .draw-code { font-size: 22px; }
  .draw-actions button { width: 100%; }
}

.steps-plain { max-width: var(--measure); padding-left: 22px; }
.steps-plain li { margin: 0 0 10px; }