:root {
  color-scheme: dark;
  --bg: #111111; --card: #1a1a1a; --text: #f2f2f2; --muted: #9a9a9a;
  --accent: #f1b105; --ok: #4cc38a; --err: #ff8a80; --border: #3a3a3a;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
       background: var(--bg); color: var(--text);
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { width: 100%; max-width: 740px; }
h1 { margin: 0 0 20px; text-align: center; line-height: 0; }
/* "lighten" fond l'arrière-plan du JPEG (#111) dans celui de la page */
h1 img { width: min(312px, 60%); height: auto; mix-blend-mode: lighten; }
/* Décors de part et d'autre du rectangle (WebP transparents). Tout est proportionnel à --zh, la hauteur
   du rectangle. Chaque image est agrandie pour que sa forme garde la même taille, et des marges négatives
   (calculées sur la position de la barre dans l'image) placent la barre à ~19 px des pointillés
   sans changer la hauteur de la ligne. */
.zone { --zh: 180px; --side: calc(var(--zh) * 0.4897 + 4.7px); /* largeur utile de l'image jaune ; les 2 colonnes latérales sont égales */
        display: grid; grid-template-columns: var(--side) 1fr var(--side); gap: 14px; align-items: center; }
.deco { display: block; width: auto; pointer-events: none; }
.deco-l { justify-self: end; }
.deco-r { justify-self: start; }
.deco-l { height: calc(var(--zh) * 1.0778); margin: calc(var(--zh) * -0.0389) calc(var(--zh) * -0.109 + 4.7px) calc(var(--zh) * -0.0389) 0; }
.deco-r { height: calc(var(--zh) * 1.1917); margin: calc(var(--zh) * -0.0958) 0 calc(var(--zh) * -0.0958) calc(var(--zh) * -0.2662 + 4.7px);
          transform: translateY(3px); }
#drop { display: grid; place-items: center; text-align: center; height: var(--zh); padding: 24px;
        background: var(--card); border: 2px dashed var(--border); border-radius: 14px;
        cursor: pointer; transition: border-color .15s, background .15s; }
#drop:hover, #drop:focus-visible, #drop.over { border-color: var(--accent); outline: none; }
#drop small { color: var(--muted); }
#list { margin-top: 16px; display: grid; gap: 10px; }
.item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.item .name { font-weight: 600; overflow-wrap: anywhere; }
.item .msg { margin-top: 4px; font-size: .95rem; color: var(--muted); }
.item.ok .msg { color: var(--ok); }
.item.err .msg { color: var(--err); }
.bar { height: 6px; margin-top: 8px; background: var(--border); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.item.ok .bar, .item.err .bar { display: none; }
/* Petits écrans : zone plus basse, donc décors plus petits */
@media (max-width: 560px) { .zone { --zh: 120px; } #drop { padding: 12px; } }