/* Mise en page générale, boutons, étiquettes, états vides, toast. */
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0 }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(24px, env(safe-area-inset-top, 0px)) 64px;
}
.wrap { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
code { font-size: .9em; background: var(--chip); padding: 1px 5px; border-radius: 4px }

.view { display: flex; flex-direction: column; gap: 20px }
section { display: flex; flex-direction: column; min-width: 0 }
.label { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--muted); margin: 0 0 8px }
.intro, .hint { color: var(--muted); margin: 0; font-size: .9rem }

.tag { display: inline-block; background: var(--sun); color: var(--sun-ink); font-weight: 600; font-size: .78rem; padding: 3px 10px; border-radius: 6px }
.tag.soft { background: var(--chip); color: var(--ink) }
.tag.ok { background: var(--ok-bg); color: var(--ok) }
.tag.no { background: var(--no-bg); color: var(--no) }
.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }

.ghost, .btn { color: inherit; appearance: none; border: 1.5px solid var(--line); background: transparent; font-weight: 500; font-size: .9rem; padding: 8px 14px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px }
.btn.ok { background: var(--ok); border-color: var(--ok); color: var(--paper) }
.btn.no { border-color: var(--no); color: var(--no) }
.ghost:disabled, .btn:disabled { opacity: .45; cursor: not-allowed }
.actions { display: flex; gap: 8px; flex-wrap: wrap }

.empty-state { text-align: left; color: var(--muted); padding: 8px 0 }
.empty-state h2 { font-family: var(--display); color: var(--ink); margin: 0 0 4px; font-size: 1.4rem }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 500; max-width: calc(100% - 32px) }

@media (prefers-reduced-motion: reduce) { * { transition: none !important } }