/* ── Offres ───────────────────────────────────────────────── */
/* ── Barre principale filtres ─────────────────────── */
.offres-filters-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}
.offres-filters-bar .search-input {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

/* ── Bouton toggle filtres ───────────────────────── */
.btn-filtres-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.btn-filtres-toggle:hover,
.btn-filtres-toggle.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-filtres-toggle.actif .filtres-badge {
  background: #fff;
  color: var(--accent);
}
.filtres-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ── Select tri compact ─────────────────────────── */
.filter-select-sm {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  flex-shrink: 0;
  max-width: 140px;
}

/* ── Panneau filtres rétractable ─────────────────── */
.offres-filtres-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease, margin-bottom .28s ease;
  margin-bottom: 0;
}
.offres-filtres-panel.ouvert {
  grid-template-rows: 1fr;
  margin-bottom: 12px;
}
.offres-filtres-inner {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.offres-filtres-panel.ouvert .offres-filtres-inner {
  padding-top: 8px;
  padding-bottom: 4px;
}

/* ── Filtres dans le panneau ─────────────────────── */
.filter-select {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  flex: 1 1 160px;
  min-width: 130px;
  max-width: 100%;
}

/* ── Bouton réinitialiser ────────────────────────── */
.btn-filtres-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.btn-filtres-reset:hover {
  color: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
}

/* ── Mobile : toggle-label masqué ────────────────── */
@media (max-width: 480px) {
  .toggle-label { display: none; }
  .btn-filtres-toggle { padding: 8px 12px; }
  .filter-select-sm   { max-width: 120px; font-size: 12px; }
}

.periode-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.periode-btn {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border2);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}

.periode-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.periode-btn:hover:not(.active) {
  background: var(--hover);
  color: var(--text);
}

.offres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.offre-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s;
}

.offre-card:hover {
  border-color: var(--border2);
}

/* Bandeau haut : famille (gauche) + jours restants (droite) */
.offre-card-header,
.offre-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.offre-card-top-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Titre centré (centerpiece de la card) */
.offre-card-titre {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  margin: 4px 0 2px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Limite à 2 lignes avec ellipsis pour ne pas déformer la card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offre-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Onglets offres ── */
.offres-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.offre-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.offre-tab-btn:hover { background: var(--hover); color: var(--text); }
.offre-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.tab-count-badge {
  display: none;
  background: rgba(239,68,68,.12);
  color: #ef4444;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
}
.tab-count-badge:not(:empty) { display: inline-block; }
.offre-tab-btn.active .tab-count-badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ── Chips critère de sélection (pourquoi cette offre) ── */
.offre-criteria-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0 2px;
}
.criteria-label {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
  margin-right: 2px;
}
.criteria-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.criteria-bookmark {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
  border-color: rgba(245,158,11,.3);
}
.criteria-pref {
  background: rgba(99,102,241,.1);
  color: #818cf8;
  border-color: rgba(99,102,241,.25);
}
.criteria-direct {
  background: rgba(0,201,141,.1);
  color: #00C98D;
  border-color: rgba(0,201,141,.25);
}
.criteria-suggestion {
  background: rgba(245,158,11,.1);
  color: #f59e0b;
  border-color: rgba(245,158,11,.25);
}
.criteria-score {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
  font-weight: 700;
}

.btn-pref-offres { margin-left: auto; }

/* ── Notice pas de prefs ── */
.pref-notice {
  font-size: 12px;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-link-inline {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

/* ── Barre de config persistante (feed « Mes offres ») ── */
.pref-config-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
}
.pref-config-resume {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pref-config-resume i { color: var(--accent); }

/* ── Modal préférences — chips ── */
.pref-section { margin-bottom: 20px; }
.pref-label   { display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.pref-hint    { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.pref-chips   { display: flex; flex-wrap: wrap; gap: 6px; }

.pref-chip {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
}
.pref-chip:hover  { border-color: var(--accent); color: var(--accent); }
.pref-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Sélecteur de sites (checkboxes) */
/* Champs de recherche des sélecteurs (sites / métiers) — texte + champ visibles */
#pref-sites-search,
#pref-familles-search {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border2);
}
#pref-sites-search::placeholder,
#pref-familles-search::placeholder { color: var(--muted); }

.pref-sites-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 6px;
}
.pref-site-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background .12s;
}
.pref-site-nom { color: var(--text); }
.pref-site-check:hover  { background: var(--hover); }
.pref-site-check.active { background: rgba(0,201,141,.10); }
/* Neutralise la règle globale `input { width:100%; padding; border }` qui sinon
   étire la case à cocher sur toute la ligne et écrase le texte (le rendant invisible). */
.pref-site-check input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.pref-site-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pref-site-nb {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: var(--hover);
  border-radius: 10px;
  padding: 1px 7px;
}

.offre-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: default;
}
.offre-match-badge .match-source-label {
  font-weight: 500;
  opacity: 0.85;
  font-size: 10px;
}

/* ── Barre filtres Matching ────────────────────────── */
.matching-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
}
.match-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.match-filter-btn:hover { background: var(--hover); color: var(--text); }
.match-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.offre-cand-statut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.offre-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  justify-content: center;   /* sous le titre, centré */
}

/* Ligne d'expiration de l'offre (centrée) */
.offre-exp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
}
.offre-exp.expiree { color: var(--red); }

/* Contacts compacts en icônes (centrés) */
.offre-contact-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.offre-contact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--hover);
  text-decoration: none;
  font-size: 13px;
  transition: transform .12s, background .12s;
}
.offre-contact-ico:hover { transform: translateY(-1px); background: var(--card-bg); }

/* Badge date */
.badge-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-date.recent {
  background: rgba(16,185,129,.15);
  color: var(--green);
}

.badge-date.normal {
  background: rgba(245,158,11,.15);
  color: var(--amber);
}

.badge-date.ancien {
  background: rgba(239,68,68,.12);
  color: var(--red);
}

.badge-date.expire {
  background: rgba(107,114,128,.15);
  color: var(--muted);
}

.badge-site {
  font-size: 10px;
  color: var(--sub);
  background: var(--hover);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
}

.offre-competences {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.competence-tag {
  background: var(--hover);
  border: 1px solid var(--border2);
  border-radius: 20px;
  font-size: 11px;
  padding: 2px 8px;
  color: var(--muted);
}

.offre-description {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.6;
}

.offre-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  justify-content: center;   /* boutons rangés et centrés en bas */
}

.btn-bookmark {
  margin-left: auto;
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
  padding: 5px 9px;
}
.btn-bookmark:hover,
.btn-bookmark.active {
  color: #f59e0b;
  border-color: rgba(245,158,11,.4);
  background: rgba(245,158,11,.1);
}

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.btn-small:hover {
  background: var(--hover);
}

.btn-small.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f1117;
}

.btn-small.btn-secondary {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.3);
  color: var(--blue);
}

.btn-small.btn-whatsapp {
  background: rgba(37,211,102,.15);
  border-color: rgba(37,211,102,.3);
  color: var(--whatsapp);
}

/* Filtre canal d'offre ACTIF → couleur accent claire (au clic / quand un filtre est appliqué) */
#offres-canal-filtres .btn-small.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f1117;
  font-weight: 700;
}

/* Alerte aucun canal */
.alerte-aucun-canal {
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--amber);
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Offre detail */
.offre-detail-header {
  margin-bottom: 14px;
}

.offre-detail-header h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.offre-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.offre-detail-description {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  background: var(--hover);
  border-radius: var(--radius-sm);
  padding: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.canaux-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.canal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--hover);
  border: 1px solid var(--border);
}

.canal-item-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.canal-item-info {
  flex: 1;
  min-width: 0;
}

.canal-item-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}

.canal-item-value {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── Sections enrichies dans le détail d'offre ── */
.offre-detail-section {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--hover);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.offre-detail-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.offre-detail-section-title i { color: var(--accent); }