/* ── MesLiens Offres Plugin ── */
:root {
  --ml-purple: #4F46A8;
  --ml-purple-light: #EEEDFE;
  --ml-purple-mid: #7F77DD;
  --ml-green: #1D9E75;
  --ml-green-light: #E1F5EE;
  --ml-amber: #CA7D0A;
  --ml-amber-light: #FAEEDA;
  --ml-hw: #0074D9;
  --ml-hw-light: #EFF9FF;
  --ml-apec: #D62B2B;
  --ml-apec-light: #FEF2F2;
  --ml-gray: #F7F6F3;
  --ml-border: #E2E0D8;
  --ml-text: #1A1A2E;
  --ml-muted: #6B6968;
  --ml-radius: 10px;
  --ml-radius-sm: 6px;
}

.ml-wrap * { box-sizing: border-box; }
.ml-wrap { font-family: 'Segoe UI', Arial, sans-serif; color: var(--ml-text); max-width: 1100px; margin: 0 auto; }

/* HEADER */
.ml-header {
  background: linear-gradient(135deg, var(--ml-purple) 0%, #3B3490 100%);
  border-radius: var(--ml-radius);
  padding: 2rem 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  text-align: center;
  color: white;
}
.ml-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 .35rem; color: white; }
.ml-subtitle { font-size: .9rem; opacity: .85; margin: 0 0 1rem; }
.ml-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ml-badge {
  padding: 3px 13px; border-radius: 20px; font-size: .74rem; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: white;
}

/* FILTRES */
.ml-filters {
  background: white; border: 1px solid var(--ml-border); border-radius: var(--ml-radius);
  padding: .65rem 1rem; margin-bottom: 1.25rem;
  position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ml-filters-inner { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ml-filter-label { font-size: .74rem; font-weight: 600; color: var(--ml-muted); }
.ml-filter-sep { margin-left: 6px; }
.ml-filter {
  padding: 4px 13px; border-radius: 20px; font-size: .74rem; font-weight: 500;
  border: 1.5px solid var(--ml-border); background: white; color: var(--ml-muted);
  cursor: pointer; transition: all .15s;
}
.ml-filter:hover { border-color: var(--ml-purple-mid); color: var(--ml-purple); }
.ml-filter.active { background: var(--ml-purple); color: white; border-color: var(--ml-purple); }
.ml-count { margin-left: auto; font-size: .73rem; color: var(--ml-muted); white-space: nowrap; }

/* GRILLE */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* CARD */
.ml-card {
  background: white; border: 1px solid var(--ml-border); border-radius: var(--ml-radius);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem;
  transition: box-shadow .18s, transform .18s;
}
.ml-card:hover { box-shadow: 0 6px 20px rgba(79,70,168,.13); transform: translateY(-2px); }
.ml-card.ml-hidden { display: none; }

.ml-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ml-source-badge {
  font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 4px;
  letter-spacing: .04em;
}
.ml-src-hw { background: var(--ml-hw-light); color: var(--ml-hw); border: 1px solid #BAE6FD; }
.ml-src-apec { background: var(--ml-apec-light); color: var(--ml-apec); border: 1px solid #FECACA; }

.ml-card-title { font-size: .97rem; font-weight: 600; color: var(--ml-text); line-height: 1.35; }
.ml-card-company { font-size: .82rem; color: var(--ml-purple); font-weight: 500; }

.ml-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.ml-tag {
  font-size: .69rem; padding: 2px 8px; border-radius: 4px;
  background: var(--ml-gray); color: var(--ml-muted); border: 1px solid var(--ml-border);
}
.ml-tag-contract { background: var(--ml-green-light); color: #0F6E56; border-color: #A7F3D0; font-weight: 600; }
.ml-tag-salary { background: var(--ml-amber-light); color: var(--ml-amber); border-color: #FCD34D; font-weight: 600; }
.ml-tag-remote { background: var(--ml-purple-light); color: var(--ml-purple); border-color: #C4B5FD; }

.ml-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.ml-skill {
  font-size: .65rem; padding: 2px 7px; border-radius: 3px;
  background: var(--ml-purple-light); color: var(--ml-purple); font-weight: 500;
}

.ml-card-desc { font-size: .78rem; color: var(--ml-muted); line-height: 1.55; }

.ml-card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: .4rem; border-top: 1px solid var(--ml-border); }
.ml-date { font-size: .68rem; color: var(--ml-muted); }

.ml-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 14px; border-radius: var(--ml-radius-sm);
  font-size: .75rem; font-weight: 600; text-decoration: none; color: white !important;
  transition: opacity .15s;
}
.ml-btn:hover { opacity: .88; text-decoration: none; }
.ml-btn-hw { background: var(--ml-hw); }
.ml-btn-apec { background: var(--ml-apec); }

/* LIENS DE RECHERCHE */
.ml-search-section { margin-top: .5rem; }
.ml-search-title { font-size: .8rem; font-weight: 600; color: var(--ml-muted); margin-bottom: .65rem; }
.ml-search-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media(max-width: 600px) { .ml-search-grid { grid-template-columns: 1fr; } }

.ml-search-card {
  display: flex; align-items: center; gap: 12px;
  background: white; border: 1px solid var(--ml-border); border-radius: var(--ml-radius);
  padding: .9rem 1rem; text-decoration: none !important; color: var(--ml-text) !important;
  transition: box-shadow .15s, transform .15s;
}
.ml-search-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.ml-search-logo {
  font-size: .8rem; font-weight: 800; min-width: 42px; text-align: center;
  padding: 5px; border-radius: var(--ml-radius-sm);
}
.ml-search-hw .ml-search-logo { color: var(--ml-hw); background: var(--ml-hw-light); }
.ml-search-apec .ml-search-logo { color: var(--ml-apec); background: var(--ml-apec-light); }
.ml-search-body { flex: 1; font-size: .78rem; line-height: 1.5; }
.ml-search-body strong { font-weight: 600; }
.ml-search-body small { color: var(--ml-muted); }
.ml-search-arrow { font-size: 1rem; color: var(--ml-muted); }

/* Responsive */
@media(max-width: 480px) {
  .ml-header { padding: 1.5rem 1rem; }
  .ml-title { font-size: 1.2rem; }
  .ml-grid { grid-template-columns: 1fr; }
  .ml-filters-inner { gap: 4px; }
}