/* Mise en page de Trouvailles.
   organic.css reste la source de vérité du système (tokens, .btn, .tag,
   .input, .card…). Ce fichier ne porte que la géométrie des trois écrans,
   reprise telle quelle du handoff : aucune couleur, aucune police et aucun
   rayon qui ne vienne d'un token. Aucune media query — le responsive tient
   sur auto-fill, flex-wrap et clamp(). */

/* — chrome commun ————————————————————————————————————————————————— */
.page-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-divider);
}
.page-header-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}
.brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; margin-right: auto;
}
.page-nav { display: flex; align-items: center; gap: var(--space-1); }
.page-main { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-4) 70px; }

/* — pilules de navigation et de filtre ———————————————————————————— */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; text-decoration: none;
  border: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text);
}
.pill:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.pill.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent); color: var(--color-bg);
}
.pill.is-active:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.page-nav .pill { font-size: 14px; padding: 7px 15px; }
.pill-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  font-family: var(--font-body);
  background: var(--color-accent-200); color: var(--color-accent-800);
}
.pill.is-active .pill-badge {
  background: color-mix(in srgb, var(--color-bg) 30%, transparent);
  color: var(--color-bg);
}

/* — titre de page ————————————————————————————————————————————————— */
.page-title-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.page-title-row h1 { font-size: clamp(30px, 6vw, 42px); margin: 0; }
.page-subtitle { margin: var(--space-1) 0 0; font-size: 14px; color: var(--color-neutral-700); }
.worker-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-neutral-700);
}
.worker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-2); display: inline-block;
}
.worker-dot.is-ko { background: var(--color-accent); }

/* — bandeau d'erreur connecteur ——————————————————————————————————— */
.banner {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  margin-bottom: var(--space-4);
}
.banner-icon {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--color-accent); color: var(--color-bg);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
}
.banner-msg { font-size: 13px; flex: 1; min-width: 200px; }
.banner-msg strong { font-weight: 700; }
.banner .btn { font-size: 13px; }

/* — barre de filtres —————————————————————————————————————————————— */
.filters {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: 22px;
}
.filter-sep {
  width: 1px; height: 22px; background: var(--color-divider); margin: 0 var(--space-1);
}

/* — grille et carte d'annonce ————————————————————————————————————— */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
  gap: var(--space-4);
}
.listing {
  display: block; padding: var(--space-4);
  border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.listing.is-vue { opacity: 0.62; }
.listing-top { display: flex; gap: var(--space-3); }

.thumb {
  width: 82px; height: 112px; flex: none;
  border-radius: 14px; overflow: hidden; position: relative;
}
.thumb-fond {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, #dcd3c4 0 7px, #eee7db 7px 14px);
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-caption {
  position: absolute; inset: auto 0 0 0;
  font-family: ui-monospace, monospace; font-size: 8px; text-align: center; padding: 3px;
  background: var(--color-neutral-100); color: var(--color-neutral-700);
}

.listing-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.listing-meta-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.listing-age { font-size: 11px; color: var(--color-neutral-600); }
.listing-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.listing-details { font-size: 12px; color: var(--color-neutral-700); }
.listing-price-row {
  margin-top: auto; display: flex; align-items: baseline;
  gap: var(--space-2); flex-wrap: wrap;
}
.listing-price {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px;
}
.listing-estimation { font-size: 12px; color: var(--color-neutral-700); }

.listing-side {
  flex: none; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; text-align: right;
}
.comparables { font-size: 10.5px; color: var(--color-neutral-600); max-width: 118px; }

.listing-foot {
  display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
  margin-top: var(--space-3); padding-top: 11px;
  border-top: 1px solid var(--color-divider);
}
.listing-foot .btn { font-size: 13px; }
.btn-neutre { color: var(--color-neutral-700); }
/* Les formulaires POST ne portent aucune mise en page : leurs boutons
   doivent rester des enfants directs du flex parent. */
.listing-foot form,
.banner form,
.empty-actions form,
.page-header-inner form,
.veille-actions form,
.form-supprimer { display: contents; }

/* — pilules d'écart, de confiance, de statut ——————————————————————— */
.ecart {
  display: inline-flex; align-items: center; border-radius: 999px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; padding: 5px 13px; letter-spacing: 0.02em;
}
.ecart-fort { background: var(--color-accent); color: var(--color-bg); }
.ecart-doux { background: var(--color-accent-200); color: var(--color-accent-800); }
.ecart-neutre {
  font-size: 15px; padding: 5px 12px;
  background: var(--color-neutral-200); color: var(--color-neutral-800);
}
.conf-eleve { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.conf-moyen { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.conf-faible, .conf-aucun {
  border: 1px solid var(--color-neutral-400); color: var(--color-neutral-700);
}
.tag-statut { font-size: 10px; }
.tag-statut-nouveau { background: var(--color-accent-2); color: var(--color-bg); }
.tag-statut-vu { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.tag-type-titre { background: var(--color-accent-200); color: var(--color-accent-800); }
.tag-type-personne { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }

/* — états vides ——————————————————————————————————————————————————— */
.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: 52px var(--space-8);
  border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface);
}
.empty h3 { margin: 0; }
.empty p { margin: 0; font-size: 14px; max-width: 44ch; color: var(--color-neutral-700); }
.empty-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent-2-200); }
.empty-circle.is-accent { background: var(--color-accent-200); }
.empty-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* — écran Watchlist ——————————————————————————————————————————————— */
.watch-cols { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.watch-list { flex: 1 1 460px; min-width: 300px; display: flex; flex-direction: column; gap: 11px; }
.watch-panel {
  flex: 1 1 340px; min-width: 300px; max-width: 420px;
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface); box-shadow: var(--shadow-md);
}
.panel-titre {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px;
}
.panel-sous-titre { font-size: 12px; color: var(--color-neutral-700); margin-top: var(--space-1); }

.veille {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-4); border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.veille.is-pause { opacity: 0.6; }
.veille-ligne1 { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.veille-nom { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.veille-resultats { margin-left: auto; font-size: 12px; color: var(--color-neutral-700); }
.veille-ligne2 {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: 12px; color: var(--color-neutral-700);
}
.puce { width: 4px; height: 4px; border-radius: 50%; background: var(--color-neutral-400); }
.veille-actions { display: flex; gap: var(--space-1); margin-top: var(--space-1); flex-wrap: wrap; }
.veille-actions .btn { font-size: 13px; }

/* — formulaire de veille —————————————————————————————————————————— */
.field-groupe { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-1); }
.field-help { font-size: 11px; color: var(--color-neutral-600); margin-top: 5px; }
.cat-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
.cat-opts .seg-opt { border: 1px solid var(--color-divider); border-radius: 999px; }
.prix-ligne { display: flex; align-items: center; gap: var(--space-2); }
.prix-ligne .input { max-width: 130px; }
.prix-unite { font-size: 13px; color: var(--color-neutral-700); }
.coche {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 14px; cursor: pointer;
}
.coche input { width: 17px; height: 17px; accent-color: var(--color-accent); }
.coche-note { font-size: 11px; color: var(--color-neutral-600); }
.form-actions {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
}
.form-supprimer .btn { margin-left: auto; }
.btn-supprimer { color: var(--color-accent-700); }
.champ-erreur { font-size: 12px; color: var(--color-accent-700); }

/* — écran Connexion ——————————————————————————————————————————————— */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--space-6); position: relative; overflow: hidden;
}
.login-blob-1 {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: var(--color-accent-2-200); top: -220px; right: -160px;
}
.login-blob-2 {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: var(--color-accent-200); bottom: -150px; left: -110px;
}
.login-card {
  position: relative; width: min(400px, 100%);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8); border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.login-titre { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 30px; line-height: 1.1; }
.login-sous-titre { font-size: 13px; color: var(--color-neutral-700); margin-top: var(--space-1); }
.login-note { font-size: 11px; color: var(--color-neutral-600); text-align: center; }
.banner-court { margin-bottom: 0; padding: var(--space-2) var(--space-3); }

/* — écran Configuration ——————————————————————————————————————————— */
.config-cols { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.config-bloc {
  flex: 1 1 420px; min-width: 300px;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.config-ok {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: 999px;
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
  font-size: 13px; margin-bottom: var(--space-4);
}

.dialog-actions form { display: contents; }

/* — bibliothèque ————————————————————————————————————————————————— */
.oeuvre {
  display: flex; gap: var(--space-3);
  padding: var(--space-4); border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.oeuvre-vignette {
  width: 72px; height: 96px; flex: none;
  border-radius: 14px; overflow: hidden; position: relative;
}
.oeuvre-vignette img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.oeuvre-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Deux champs côte à côte, qui repassent l'un sous l'autre sur un
   téléphone étroit — sans media query, comme le reste. */
.champs-paire { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.champs-paire .field { flex: 1 1 130px; }

.photo-apercu {
  width: 100%; max-width: 220px; aspect-ratio: 3 / 4;
  border-radius: var(--radius-md); overflow: hidden;
  margin-bottom: var(--space-2); background: var(--color-neutral-200);
}
.photo-apercu img { width: 100%; height: 100%; object-fit: cover; }

/* Un input file ne se style pas comme un input texte : on lui rend juste
   une hauteur confortable au doigt. */
.input-fichier { padding: 7px 12px; height: auto; }
select.input { appearance: none; }
textarea.input { min-height: 72px; }

/* — déclenchement manuel d'un passage ————————————————————————————— */
.passage {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; text-align: right;
}
.passage-actions {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  justify-content: flex-end;
}
.passage-actions form { display: contents; }
.passage-actions .btn { font-size: 13px; }
.passage-note { font-size: 11px; color: var(--color-neutral-600); }