/* Squelette minimal, pas de design final — voir README/mémoire projet. */
body { font-family: system-ui, sans-serif; margin: 0; padding: 0 1rem 2rem; max-width: 640px; margin-inline: auto; }
header { padding: 1rem 0; }
nav { display: flex; gap: 0.5rem; }
.tab-btn { padding: 0.5rem 1rem; border: 1px solid #ccc; background: #f0f0f0; cursor: pointer; }
.tab-btn.active { background: #333; color: #fff; }
.tab { display: none; }
.tab.active { display: block; }
form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
input[type="text"] { flex: 1; padding: 0.4rem; min-width: 8rem; }
ul { list-style: none; padding: 0; }
li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid #eee; }
li img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.item-nom { flex: 1; }
.card { border: 1px solid #ddd; border-radius: 6px; padding: 0.75rem; margin: 0.75rem 0; }
.card.realisable { border-color: #2a9d3f; }
.card .badge { font-size: 0.8rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: #eee; }
.card .badge.ok { background: #d5f5dd; color: #1a6b2c; }
.card .badge.manque { background: #fdecea; color: #b3261e; }