/* =========================================================
   FasoAnnonces — Design System (theme.css)
   Source unique de vérité pour couleurs, espacements,
   rayons, ombres et composants réutilisables.
   ========================================================= */

:root {
  /* Couleurs de marque */
  --fa-primary:      #ff6e14;
  --fa-primary-dark: #e55e00;
  --fa-primary-50:   #fff3ec;
  --fa-primary-100:  #ffe0cc;
  --fa-primary-200:  #ffc199;

  /* Neutres */
  --fa-ink:     #1c1c1e;  /* texte principal */
  --fa-muted:   #6b7280;  /* texte secondaire */
  --fa-faint:   #9ca3af;  /* hints / placeholders */
  --fa-line:    #ececec;  /* bordures */
  --fa-surface: #ffffff;  /* cartes */
  --fa-bg:      #f7f7f5;  /* fond de page */

  /* Sémantique */
  --fa-success: #16a34a;
  --fa-danger:  #dc2626;
  --fa-warning: #f59e0b;

  /* Rayons */
  --fa-r-sm:   10px;
  --fa-r:      14px;
  --fa-r-lg:   18px;
  --fa-r-pill: 999px;

  /* Ombres */
  --fa-shadow:      0 4px 16px rgba(0,0,0,.06);
  --fa-shadow-md:   0 8px 24px rgba(0,0,0,.08);
  --fa-shadow-primary: 0 8px 20px rgba(255,110,20,.32);

  /* Transitions */
  --fa-t: .2s ease;
}

body { font-family: 'Nunito Sans', system-ui, sans-serif; color: var(--fa-ink); }

/* ---------- Boutons ---------- */
.fa-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:800; font-size:15px; line-height:1;
  padding:13px 20px; border-radius:var(--fa-r);
  border:2px solid transparent; cursor:pointer;
  transition:transform var(--fa-t), background var(--fa-t), box-shadow var(--fa-t);
}
.fa-btn:active { transform:translateY(1px) scale(.99); }
.fa-btn--primary { background:var(--fa-primary); color:#fff; box-shadow:var(--fa-shadow-primary); }
.fa-btn--primary:hover { background:var(--fa-primary-dark); }
.fa-btn--ghost { background:#fff; color:var(--fa-primary); border-color:var(--fa-primary); }
.fa-btn--ghost:hover { background:var(--fa-primary-50); }
.fa-btn--soft { background:var(--fa-primary-50); color:var(--fa-primary-dark); }
.fa-btn--block { width:100%; }

/* ---------- Champs ---------- */
.fa-input {
  width:100%; padding:13px 15px; font-size:15px;
  background:#fff; border:1px solid var(--fa-line); border-radius:var(--fa-r);
  outline:none; transition:border-color var(--fa-t), box-shadow var(--fa-t);
}
.fa-input::placeholder { color:var(--fa-faint); }
.fa-input:focus { border-color:var(--fa-primary); box-shadow:0 0 0 3px var(--fa-primary-100); }

.fa-searchbar {
  display:flex; align-items:center; gap:10px;
  background:#f1f1ef; border-radius:var(--fa-r); padding:12px 15px; color:var(--fa-faint);
}

/* ---------- Cartes ---------- */
.fa-card {
  background:var(--fa-surface); border:1px solid var(--fa-line);
  border-radius:var(--fa-r-lg); box-shadow:var(--fa-shadow);
}

/* ---------- Puces catégories ---------- */
.fa-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:var(--fa-r-pill);
  background:#fff; border:1px solid var(--fa-line);
  font-size:13px; font-weight:700; color:var(--fa-muted);
  white-space:nowrap; cursor:pointer; transition:all var(--fa-t);
}
.fa-chip:hover { border-color:var(--fa-primary-200); }
.fa-chip--active { background:var(--fa-primary); border-color:var(--fa-primary); color:#fff; }

.fa-cat { text-align:center; flex:0 0 auto; }
.fa-cat__icon {
  width:56px; height:56px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--fa-primary-50); color:var(--fa-primary); font-size:26px; margin:0 auto;
}
.fa-cat__label { font-size:11px; color:var(--fa-muted); margin-top:6px; font-weight:600; }

/* ---------- Badges ---------- */
.fa-badge {
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em;
  padding:3px 8px; border-radius:7px; text-transform:uppercase;
}
.fa-badge--urgent  { background:var(--fa-primary); color:#fff; }
.fa-badge--new     { background:var(--fa-success); color:#fff; }
.fa-badge--soft    { background:var(--fa-primary-50); color:var(--fa-primary-dark); }

/* ---------- Carte d'annonce ---------- */
.fa-listing {
  background:var(--fa-surface); border:1px solid var(--fa-line);
  border-radius:var(--fa-r-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--fa-t), box-shadow var(--fa-t);
}
.fa-listing:hover { transform:translateY(-2px); box-shadow:var(--fa-shadow-md); }
.fa-listing__media { position:relative; aspect-ratio:4/3; background:#e9e7e2;
  display:flex; align-items:center; justify-content:center; color:#c4c2bc; font-size:28px; }
.fa-listing__media img { width:100%; height:100%; object-fit:cover; }
.fa-listing__fav {
  position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  color:var(--fa-faint); font-size:16px; border:none; cursor:pointer; transition:color var(--fa-t);
}
.fa-listing__fav.is-active { color:var(--fa-primary); }
.fa-listing__tags { position:absolute; top:8px; left:8px; display:flex; gap:5px; }
.fa-listing__body { padding:10px 12px 13px; }
.fa-listing__price { font-size:16px; font-weight:800; color:var(--fa-ink); }
.fa-listing__title { font-size:13px; color:#444; margin:3px 0 7px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fa-listing__meta { display:flex; align-items:center; gap:4px; color:var(--fa-faint); font-size:11px; }

/* ---------- Titres de section ---------- */
.fa-section-head { display:flex; align-items:center; justify-content:space-between; }
.fa-section-title { font-size:17px; font-weight:800; color:var(--fa-ink); }
.fa-section-link  { font-size:13px; font-weight:700; color:var(--fa-primary); }

/* ---------- Grille d'annonces ---------- */
.fa-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }

/* ---------- Utilitaires ---------- */
.fa-container { max-width:1100px; margin:0 auto; padding:0 16px; }
.fa-stack > * + * { margin-top:1rem; }