/* Favoris, alertes de recherche, centre de notifications (Phase 5) — mêmes
   tokens que style.css/auth.css/messaging.css. Chargé sur tout le site (voir
   functions.php) car la cloche de notifications (header.php) est présente
   sur toutes les pages, y compris hors des gabarits /compte/. */

/* Badge non-lu générique — dupliqué volontairement de messaging.css (chargé
   uniquement sur /compte/ et /conversation/) car la cloche du header, elle,
   est de partout : même règle, deux points de chargement, jamais de
   divergence visuelle entre les deux. */
.jc-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  background: var(--jc-blue-bright, var(--jc-blue)); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px; line-height: 1;
}

/* Cloche de notifications (header.php) */
.jc-header-bell { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.jc-header-bell .jc-unread-badge { position: absolute; top: -6px; right: -10px; margin-left: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

/* Bouton favori — fiche annonce (single-annonce.php) */
.jc-favori-btn { cursor: pointer; font-family: var(--font-title); background: transparent; }
.jc-favori-btn.is-active { border-color: var(--jc-blue); color: var(--jc-blue); background: rgba(0,56,168,.06); }

/* Bouton favori — carte de la liste opp-detail (archive-annonce.php / accueil réelle) */
.opp-detail-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.jc-favori-card-form { margin: 0; }
.jc-favori-btn-icon {
  border: 1.5px solid var(--jc-border); border-radius: 999px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
  background: var(--jc-white); color: var(--jc-gray);
}
.jc-favori-btn-icon.is-active { border-color: var(--jc-blue); color: var(--jc-blue); background: rgba(0,56,168,.06); }

/* Formulaire "Créer une alerte pour cette recherche" (archive-annonce.php) */
.jc-create-alerte-form { margin-top: 4px; }

/* Onglet "Mes favoris" (/compte/) */
.jc-favoris-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.jc-favoris-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--jc-border); border-radius: 12px; background: var(--jc-white);
  flex-wrap: wrap;
}
.jc-favoris-item.is-unavailable { background: var(--jc-light); }
.jc-favoris-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jc-favoris-item-title { font-weight: 700; font-size: 15px; color: var(--jc-navy); }
a.jc-favoris-item-title:hover { color: var(--jc-blue); }
.jc-favoris-item-unavailable { font-size: 12px; color: var(--jc-gray); font-style: italic; }
.jc-favoris-item-meta { font-size: 12px; color: var(--jc-gray); }

/* Onglet "Mes alertes" (/compte/) */
.jc-alertes-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.jc-alertes-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--jc-border); border-radius: 12px; background: var(--jc-white);
  flex-wrap: wrap;
}
.jc-alertes-item.is-inactive { opacity: .6; }
.jc-alertes-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jc-alertes-item-title { font-weight: 700; font-size: 15px; color: var(--jc-navy); }
.jc-alertes-item-meta { font-size: 12px; color: var(--jc-gray); }
.jc-alertes-item-status { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--jc-gray); }
.jc-alertes-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.jc-alertes-item-actions form { margin: 0; }
.jc-alertes-item-actions button { border: none; cursor: pointer; font-family: var(--font-title); background: transparent; }
.jc-alertes-item-actions .btn-outline-dark { border: 1.5px solid var(--jc-border); }
.jc-alertes-item-actions .annonce-row-delete { background: transparent; color: #B3261E; border: 1.5px solid #F4C9C6; }
.jc-alertes-item-actions .annonce-row-delete:hover { background: #FDECEC; }

/* Onglet "Notifications" (/compte/) — chaque ligne est un <button> plein
   format à l'intérieur d'un <form> (voir page-compte.php) : cliquer n'importe
   où sur la ligne marque la notification comme lue ET emmène vers sa cible,
   en une seule soumission serveur, sans JavaScript. */
.jc-notifications-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.jc-notification-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--jc-border); border-radius: 12px; background: var(--jc-white);
  cursor: pointer; text-align: left; font-family: var(--font-body);
}
.jc-notification-row:hover { border-color: var(--jc-blue); background: var(--jc-light); }
.jc-notification-row.is-unread { border-color: var(--jc-blue); background: rgba(0,56,168,.04); }
.jc-notification-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jc-notification-row-title { font-weight: 700; font-size: 14px; color: var(--jc-navy); }
.jc-notification-row.is-unread .jc-notification-row-title { color: var(--jc-blue); }
.jc-notification-row-subtitle { font-size: 12px; color: var(--jc-gray); }
.jc-notification-row-date { font-size: 11px; color: var(--jc-gray); margin-top: 2px; }
.jc-notification-row .jc-unread-badge { width: 10px; height: 10px; min-width: 10px; padding: 0; margin-left: 0; flex-shrink: 0; }

@media (max-width: 560px) {
  .jc-favoris-item, .jc-alertes-item { flex-direction: column; align-items: flex-start; }
  .jc-notification-row { flex-direction: row; }
}