:root {
  --gris-50:#FAFAFA; --gris-100:#F5F5F5; --gris-200:#E5E5E5;
  --gris-500:#737373; --gris-900:#171717; --blanc:#FFFFFF;
  --noir:#111111; --bleu:#2563EB; --bleu-100:#DBEAFE;
  --rouge:#DC2626; --vert:#16A34A;
  --r-carte:12px; --r-champ:8px;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--gris-50); color:var(--gris-900);
  font:14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Barre du haut */
.barre {
  display:flex; align-items:center; justify-content:space-between;
  height:48px; padding:0 20px;
  background:var(--blanc); border-bottom:1px solid var(--gris-200);
}
.barre-gauche { display:flex; align-items:center; gap:16px; min-width:0; }
.logo { height:22px; width:auto; display:block; }
.barre-titre {
  padding-left:16px; border-left:1px solid var(--gris-200);
  color:var(--gris-500);
}
.utilisateur { color:var(--gris-500); font-size:13px; }

/* Page */
.page { max-width:880px; margin:0 auto; padding:32px 20px 80px; }
h1 { font-size:30px; line-height:36px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; }
h2 { font-size:17px; line-height:24px; font-weight:600; margin:0 0 16px; }
.intro { color:var(--gris-500); margin:0 0 28px; max-width:56ch; }
.secondaire { color:var(--gris-500); font-size:13px; margin:0; }

/* Carte */
.carte {
  background:var(--blanc); border:1px solid var(--gris-200);
  border-radius:var(--r-carte); padding:24px; margin-bottom:24px;
}

/* Zone de dépôt */
.zone {
  background:var(--gris-100); border:1px solid var(--gris-200);
  border-radius:var(--r-champ); padding:48px 24px; text-align:center;
  cursor:pointer; transition:background .15s, border-color .15s;
  margin-bottom:24px;
}
.zone:hover { border-color:#d4d4d4; }
.zone:focus-visible { outline:2px solid var(--bleu); outline-offset:2px; }
.zone.survol { background:var(--bleu-100); border-color:var(--bleu); }
.zone-texte { margin:0 0 6px; font-size:15px; }
.zone-aide { margin:0; color:var(--gris-500); font-size:13px; }
.lien { color:var(--bleu); font-weight:500; text-decoration:underline; }

/* États */
.ligne-etat { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.pastille {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--gris-100); border-radius:999px; padding:4px 11px;
  font-size:13px; font-weight:500; white-space:nowrap;
}
.point { width:7px; height:7px; border-radius:50%; background:var(--gris-500); }
.pastille.encodage .point { background:var(--bleu); }
.pastille.pret     .point { background:var(--vert); }
.pastille.echec    .point { background:var(--rouge); }

.jauge { height:6px; background:var(--gris-100); border-radius:999px; overflow:hidden; }
.jauge-barre { height:100%; width:0; background:var(--noir); transition:width .2s linear; }
.jauge-barre.indetermine {
  background:linear-gradient(90deg,var(--gris-200) 25%,var(--noir) 50%,var(--gris-200) 75%);
  background-size:200% 100%; animation:defile 1.4s linear infinite;
}
@keyframes defile { from { background-position:200% 0 } to { background-position:-200% 0 } }

.erreur {
  color:var(--rouge); background:#FEF2F2; border:1px solid #FECACA;
  border-radius:var(--r-champ); padding:12px 14px; margin:0 0 24px; font-size:13px;
}

/* Résultat */
.apercu { aspect-ratio:16/9; background:#000; border-radius:var(--r-champ); overflow:hidden; margin-bottom:20px; }
.apercu iframe { width:100%; height:100%; border:0; display:block; }

.bloc-code { position:relative; margin-bottom:20px; }
.bloc-code pre {
  background:var(--gris-100); border:1px solid var(--gris-200);
  border-radius:var(--r-champ); padding:16px 16px 16px; margin:0;
  font:12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space:pre-wrap; word-break:break-all; max-height:180px; overflow:auto;
}
.bouton-copier {
  position:absolute; top:10px; right:10px;
  background:var(--noir); color:#fff; border:0; border-radius:6px;
  padding:6px 12px; font:500 12px Inter, sans-serif; cursor:pointer;
}
.bouton-copier.ok { background:var(--vert); }
.bouton-secondaire {
  background:var(--blanc); color:var(--gris-900);
  border:1px solid var(--gris-200); border-radius:var(--r-champ);
  padding:9px 16px; font:500 14px Inter, sans-serif; cursor:pointer;
}
.bouton-secondaire:hover { background:var(--gris-100); }

/* Liste */
.liste { display:flex; flex-direction:column; }
.item {
  display:flex; align-items:center; gap:14px;
  padding:10px 8px; border-bottom:1px solid var(--gris-200);
  border-radius:6px;
}
.item:last-child { border-bottom:0; }
.item:hover { background:var(--gris-100); }
.item img { width:64px; height:36px; object-fit:cover; border-radius:4px; background:var(--gris-100); flex:none; }
.item-corps { min-width:0; flex:1; }
.item-nom { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-meta { color:var(--gris-500); font-size:12px; }
.item button {
  background:var(--blanc); border:1px solid var(--gris-200); border-radius:6px;
  padding:5px 11px; font:500 12px Inter, sans-serif; cursor:pointer; flex:none;
}
.item button:hover { background:var(--gris-100); }
.item button.ok { background:var(--vert); border-color:var(--vert); color:#fff; }

@media (max-width:640px) {
  .barre-titre { display:none; }
  .page { padding:24px 16px 64px; }
  h1 { font-size:24px; line-height:30px; }
  .zone { padding:36px 16px; }
}

.erreur a { color:var(--rouge); font-weight:500; }