:root {
  --green: #1f6f43;
  --red: #c0392b;
  --amber: #8a6500;
  --bg: #f7f7f5;
  --border: #e2e2e0;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: #222;
}
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand { font-weight: 700; text-decoration: none; color: #222; font-size: 1.1em; }
.nav-link { text-decoration: none; color: var(--green); font-size: 0.9em; font-weight: 600; }
.bookmarklet-btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1em;
  cursor: grab;
  border: 2px dashed rgba(255,255,255,0.5);
}
.container { max-width: 1000px; margin: 0 auto; padding: 24px; }

h1 { font-size: 1.5em; margin-bottom: 4px; }
h2 { font-size: 1.1em; margin-top: 0; }

.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
}

.inline-form { display: flex; gap: 10px; }
.inline-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }
.stack-form { display: flex; flex-direction: column; gap: 10px; }
.stack-form textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
button {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
button:hover { opacity: 0.9; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: #222;
  transition: box-shadow 0.15s;
}
.card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.card .meta { color: #777; font-size: 0.85em; margin: 2px 0 8px; }
.mini-list { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.mini-list li { padding: 3px 0; }
.mini-list .more { color: #888; }

.empty { color: #888; }

.listing { display: flex; flex-direction: column; gap: 8px; }
.listing-row {
  display: grid;
  grid-template-columns: 64px 1fr 130px 80px 90px;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: #222;
}
.listing-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.thumb { position: relative; flex-shrink: 0; }
.thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.thumb-placeholder { width: 56px; height: 56px; background: #eee; border-radius: 6px; }
.thumb .tile-dot { top: 3px; right: 3px; }
.listing-info { display: flex; flex-direction: column; }
.listing-info .meta { color: #777; font-size: 0.85em; }
.listing-prix { font-weight: 700; }
.listing-likes { color: var(--red); }

.statut-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.statut-dot.statut-active, .statut-badge.statut-active { background: #e3f4e8; color: var(--green); }
.statut-dot.statut-disparue, .statut-badge.statut-disparue { background: #fbe4e2; color: var(--red); }
.statut-dot.statut-reapparue, .statut-badge.statut-reapparue,
.statut-dot.statut-republiee, .statut-badge.statut-republiee { background: #fff4d6; color: var(--amber); }
.statut-dot.statut-erreur, .statut-badge.statut-erreur { background: #eee; color: #555; }
.statut-dot { width: 8px; height: 8px; }
.statut-badge { padding: 3px 9px; border-radius: 6px; font-size: 0.8em; font-weight: 600; }

.photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.photos-grid img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }

.carac-table, .historique-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.carac-table th, .carac-table td,
.historique-table th, .historique-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.historique-table th { background: #f1f1ef; }

.breadcrumb a { color: var(--green); text-decoration: none; font-size: 0.9em; }

/* Header dossier avec bouton renommer */
.dossier-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dossier-header h1 { margin: 0; }
.btn-rename {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em;
  padding: 4px 6px;
  border-radius: 6px;
  color: #888;
  line-height: 1;
}
.btn-rename:hover { background: #f0f0ee; color: #444; }
.rename-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rename-form input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1.1em;
  font-weight: 700;
  width: 220px;
}
.btn-cancel {
  background: #f0f0ee;
  color: #444;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.btn-cancel:hover { background: #e4e4e2; }

/* Cartes dossier */
.card { position: relative; }
.card-link { display: block; text-decoration: none; color: #222; }
.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-header h3 { margin: 0; font-size: 1em; font-weight: 700; }
.count-badge {
  background: #f0f0ee;
  color: #555;
  font-size: 0.78em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}
.delete-form { margin-top: 10px; }

/* Grille de mini-photos dans les cartes */
.annonce-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 44px;
}
.annonce-tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8e8e6;
}
.annonce-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-placeholder {
  width: 100%;
  height: 100%;
  background: #e2e2e0;
}
.tile-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.tile-dot.statut-active   { background: #22c55e; }
.tile-dot.statut-disparue { background: #ef4444; }
.tile-dot.statut-reapparue,
.tile-dot.statut-republiee { background: #f59e0b; }
.tile-dot.statut-erreur   { background: #9ca3af; }

/* Rangées listing avec bouton supprimer */
.listing-row-wrap { display: flex; align-items: center; gap: 8px; }
.listing-row-wrap .listing-row { flex: 1; }

/* Boutons danger */
.btn-danger {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85em;
}
.btn-danger:hover { opacity: 0.85; }
.btn-danger.btn-sm { padding: 6px 10px; font-size: 0.8em; flex-shrink: 0; }