/* ========== DASHBOARD ADHÉRENT ========== */
.dashboard-hero {
  position: relative;
  background: var(--navy-950);
  color: var(--cream);
  padding: 4rem 1.5rem 3rem;
  overflow: hidden;
}

.dashboard-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}

.dashboard-welcome .eyebrow {
  color: var(--gold-500);
}

.dashboard-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 1rem 0 1.2rem;
  color: var(--cream);
}

.dashboard-title em {
  color: var(--gold-400);
  font-style: normal;
}

.dashboard-lead {
  color: rgba(245, 239, 227, 0.8);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 580px;
  margin: 0;
}

.dashboard-user-card {
  background: rgba(245, 239, 227, 0.06);
  border: 1px solid rgba(183, 144, 68, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 4px;
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.dashboard-user-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}

/* Bloc profil intégré dans la carte hero */
.dashboard-profile-block {
  background: rgba(1, 21, 45, 0.4);
  border: 1px solid rgba(183, 144, 68, 0.25);
  border-radius: 3px;
  padding: 1rem 1.1rem;
}

.dashboard-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.dashboard-profile-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.85);
}

.dashboard-profile-percent {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--gold-400);
  line-height: 1;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

.dashboard-profile-bar {
  height: 6px;
  background: rgba(245, 239, 227, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.7rem;
}

.dashboard-profile-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-profile-hint {
  font-size: 0.78rem;
  color: rgba(245, 239, 227, 0.7);
  line-height: 1.5;
  margin: 0 0 0.9rem 0;
  font-style: italic;
}

.dashboard-profile-btn {
  width: 100%;
  background: var(--gold-500);
  color: var(--navy-950);
  border: 1px solid var(--gold-500);
  padding: 0.7rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.dashboard-profile-btn:hover {
  background: transparent;
  color: var(--gold-400);
}

.dashboard-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-user-name {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.dashboard-user-role {
  font-size: 0.8rem;
  color: var(--gold-400);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.dashboard-user-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(245, 239, 227, 0.75);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(76, 145, 80, 0.2);
  flex-shrink: 0;
}

.dashboard-logout {
  background: transparent;
  border: 1px solid rgba(245, 239, 227, 0.25);
  color: rgba(245, 239, 227, 0.85);
  padding: 0.6rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  width: 100%;
}

.dashboard-logout:hover {
  background: var(--gold-500);
  color: var(--navy-950);
  border-color: var(--gold-500);
}

/* Grille de KPIs */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  margin-bottom: 4rem;
}

.stat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.6rem 1.5rem;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stat-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(1, 21, 45, 0.08);
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.stat-icon-blue {
  background: rgba(44, 70, 116, 0.12);
  color: #2c4674;
}

.stat-icon-green {
  background: rgba(76, 145, 80, 0.12);
  color: var(--green-500);
}

.stat-icon-gold {
  background: rgba(183, 144, 68, 0.12);
  color: var(--gold-500);
}

.stat-icon-business {
  background: rgba(74, 56, 86, 0.12);
  color: #4a3856;
}

.stat-card-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.stat-card-value {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 500;
  color: var(--gold-500);
  line-height: 1;
  margin: 0.3rem 0 0.4rem;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

.stat-card-meta {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.stat-card-footer {
  margin-top: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.stat-card-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--gold-500);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.stat-card-link:hover {
  color: var(--navy-950);
}

/* Carte primaire (statut adhésion) navy */
.stat-card-primary {
  background: linear-gradient(135deg, var(--navy-950) 0%, #1a2d4f 100%);
  color: var(--cream);
  border-color: var(--navy-950);
}

.stat-card-primary:hover {
  border-color: var(--gold-500);
}

.stat-card-primary .stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.stat-card-primary .stat-card-label {
  color: var(--gold-400);
}

.stat-card-primary .stat-card-value {
  color: var(--gold-400);
}

.stat-card-primary .stat-card-meta {
  color: rgba(245, 239, 227, 0.7);
}

.stat-card-primary .stat-card-footer {
  border-top-color: rgba(245, 239, 227, 0.15);
}

.stat-card-primary .stat-card-link {
  color: var(--gold-400);
}

.stat-card-primary .stat-card-link:hover {
  color: var(--cream);
}

.stat-card-badge {
  display: inline-flex;
  padding: 0.3rem 0.8rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-card-badge-active {
  background: rgba(76, 145, 80, 0.85);
  color: white;
}

.stat-card-badge-warning {
  background: rgba(192, 142, 44, 0.95);
  color: white;
}

.stat-card-badge-late {
  background: rgba(201, 48, 44, 0.92);
  color: white;
}

/* Variantes visuelles de la carte adhésion selon le statut */
.stat-card-membership.is-late {
  border-left: 3px solid #c9302c;
}
.stat-card-membership.is-pending {
  border-left: 3px solid var(--gold-500, var(--gold-500));
}
.stat-card-membership.is-paid,
.stat-card-membership.is-exempt {
  border-left: 3px solid var(--green-500);
}

/* Section accès rapide */
.dashboard-section {
  margin-bottom: 2rem;
}

.dashboard-section-header {
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.dashboard-section-title {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0 0 0.4rem 0;
}

.dashboard-section-title em {
  color: var(--gold-500);
  font-style: normal;
}

.dashboard-section-sub {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

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

.quick-action {
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.3rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  font-family: 'Manrope', sans-serif;
}

.quick-action:hover {
  border-color: var(--gold-500);
  background: rgba(183, 144, 68, 0.04);
  transform: translateX(3px);
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(1, 21, 45, 0.06);
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.quick-action:hover .quick-action-icon {
  background: var(--gold-500);
  color: var(--navy-950);
}

.quick-action-content {
  flex: 1;
  min-width: 0;
}

.quick-action-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-950);
  margin-bottom: 0.2rem;
}

.quick-action-text {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.quick-action-arrow {
  color: var(--gold-500);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.quick-action:hover .quick-action-arrow {
  transform: translateX(4px);
}

/* Responsive dashboard */
@media (max-width: 968px) {
  .dashboard-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 568px) {
  .dashboard-hero {
    padding: 3rem 1rem 2rem;
  }
  .stat-card-value {
    font-size: 2.6rem;
  }
  .quick-action {
    padding: 1.1rem;
  }
}

/* ========== PROFIL ADHÉRENT ========== */
.profile-back-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid rgba(245, 239, 227, 0.25);
  color: rgba(245, 239, 227, 0.85);
  padding: 0.65rem 1.2rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 3rem 0;
  transition: all 0.25s ease;
}

.profile-back-btn svg {
  transition: transform 0.3s ease;
}

.profile-back-btn:hover {
  background: var(--gold-500);
  color: var(--navy-950);
  border-color: var(--gold-500);
}

.profile-back-btn:hover svg {
  transform: translateX(-4px);
}

/* Variante "fond clair" : couleurs adaptées pour un placement sur fond crème
   ou blanc (ex: au-dessus du hero d'une page détail d'événement). Reprend
   la même typographie et animation que le bouton standard sur fond navy. */
.profile-back-btn-light {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid var(--line, rgba(1, 21, 45, 0.12));
  color: var(--ink, #01152d);
  padding: 0.65rem 1.2rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1.5rem 0;
  transition: all 0.25s ease;
}

.profile-back-btn-light svg {
  transition: transform 0.3s ease;
}

.profile-back-btn-light:hover {
  background: var(--navy-950, #01152d);
  color: var(--cream, #f5efe3);
  border-color: var(--navy-950, #01152d);
}

.profile-back-btn-light:hover svg {
  transform: translateX(-4px);
}

/* Indicateur de complétion */
.profile-completion {
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-500);
  padding: 1.2rem 1.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 2rem;
  align-items: center;
  border-radius: 3px;
}

.profile-completion-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  row-gap: 0.5rem;
}

.profile-completion-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.profile-completion-percent {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--gold-500);
  line-height: 1;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

.profile-completion-sub {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

.profile-completion-bar {
  height: 8px;
  background: rgba(1, 21, 45, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.profile-completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Sections du formulaire */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.profile-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2rem 2.2rem;
}

.profile-section-header {
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.profile-section-title {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0 0 0.3rem 0;
}

.profile-section-sub {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Photo de profil */
.profile-grid-photo {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
}

.profile-photo-wrap {
  text-align: center;
}

.profile-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(183, 144, 68, 0.12), rgba(183, 144, 68, 0.05));
  border: 2px dashed rgba(183, 144, 68, 0.4);
  color: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: border-color 0.3s ease;
}

.profile-photo.has-image {
  border: 2px solid var(--gold-500);
}

.profile-photo.has-image svg {
  display: none;
}

/* ========== MODALE UPLOAD AVATAR ========== */
.avatar-modal-preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.avatar-modal-preview {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(183, 144, 68, 0.12), rgba(183, 144, 68, 0.05));
  border: 2px solid var(--gold-500);
  color: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.avatar-modal-preview svg {
  opacity: 0.6;
}

.avatar-modal-preview.has-image svg {
  display: none;
}

/* Quand une image est chargée, le fond du cercle devient blanc pour refléter
   fidèlement le rendu final (le canvas exporté a un fond blanc). Visible
   surtout en dézoom, où une marge apparaît autour d'un logo. Le background-image
   (la photo) est posé en style inline par le JS et reste prioritaire. */
.avatar-modal-preview.has-image {
  background-color: #ffffff;
}

/* Slider de zoom de l'avatar : visible après sélection d'un fichier. Piste
   discrète, poignée dorée, icônes loupe de part et d'autre. */
.avatar-zoom-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 280px;
  margin: 0 auto 1.5rem;
  color: var(--gold-600);
}

.avatar-zoom-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(183, 144, 68, 0.25);
  cursor: pointer;
  outline: none;
}

.avatar-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-500);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(1, 21, 45, 0.25);
  cursor: pointer;
}

.avatar-zoom-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-500);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(1, 21, 45, 0.25);
  cursor: pointer;
}

.avatar-zoom-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(183, 144, 68, 0.25);
}

.avatar-dropzone {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: white;
  border: 2px dashed var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 1.2rem;
}

.avatar-dropzone:hover,
.avatar-dropzone.is-dragover {
  border-color: var(--gold-500);
  background: rgba(183, 144, 68, 0.04);
}

.avatar-dropzone-icon {
  flex-shrink: 0;
  color: var(--gold-500);
}

.avatar-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.avatar-dropzone-text strong {
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  color: var(--navy-950);
  font-weight: 600;
}

.avatar-dropzone-text span {
  font-size: 0.8rem;
  color: var(--muted);
}

.avatar-rules {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem 0;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.avatar-rules li {
  position: relative;
  padding-left: 1.2rem;
}

.avatar-rules li::before {
  content: "•";
  position: absolute;
  left: 0.3rem;
  color: var(--gold-500);
  font-weight: 700;
}

.profile-photo-upload {
  background: transparent;
  border: 1px solid var(--gold-500);
  color: var(--navy-950);
  padding: 0.55rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.25s ease;
}

.profile-photo-upload:hover {
  background: var(--gold-500);
  color: var(--navy-950);
}

.profile-photo-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0.6rem 0 0;
  font-style: italic;
}

.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.4rem 0 0 0;
  font-style: italic;
}

/* Indice "champ verrouillé" : utilisé pour expliquer pourquoi un champ est
   désactivé dans le contexte (ex: origine pré-remplie depuis une mise en
   relation reçue). Plus visible qu'un .form-hint standard, avec une icône
   cadenas pour évoquer immédiatement le verrouillage. */
.form-hint-locked {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  color: var(--gold-500);
  font-style: normal;
  font-weight: 500;
  font-size: 0.78rem;
}
.form-hint-locked svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* État verrouillé d'un form-group : champ grisé, curseur "interdit",
   visuel discret qui indique que le champ ne peut plus être modifié. */
.form-group.is-locked .form-input,
.form-group.is-locked .form-select {
  background: rgba(245, 239, 227, 0.5);
  color: var(--ink);
  opacity: 0.75;
  cursor: not-allowed;
  border-color: rgba(183, 144, 68, 0.35);
}
/* Champ verrouillé : l'outline et la box-shadow sont volontairement masqués
   au focus car l'utilisateur ne peut pas éditer la valeur (cursor: not-allowed).
   Le champ reste navigable au clavier (Tab fonctionne) mais l'absence d'indicateur
   au focus signale qu'il n'y a rien à faire ici. */
.form-group.is-locked .form-input:focus,
.form-group.is-locked .form-select:focus {
  outline: none;
  border-color: rgba(183, 144, 68, 0.35);
  box-shadow: none;
}

/* Offre & demande - grille double */
.profile-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.offer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.offer-icon-give {
  background: rgba(76, 145, 80, 0.15);
  color: var(--green-500);
}

.offer-icon-search {
  background: rgba(44, 70, 116, 0.15);
  color: #2c4674;
}

/* Mots-clés */
.profile-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  min-height: 40px;
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  background: rgba(183, 144, 68, 0.12);
  border: 1px solid rgba(183, 144, 68, 0.3);
  color: var(--navy-950);
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.keyword-tag button {
  background: transparent;
  border: none;
  color: var(--gold-500);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.3rem;
  font-weight: 700;
  transition: color 0.2s ease;
}

.keyword-tag button:hover {
  color: var(--red-500);
}

.keyword-input-wrap {
  display: flex;
  gap: 0.6rem;
}

.keyword-input-wrap .form-input {
  flex: 1;
}

.keyword-add-btn {
  background: var(--navy-950);
  color: var(--cream);
  border: none;
  padding: 0 1.5rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.keyword-add-btn:hover {
  background: var(--gold-500);
  color: var(--navy-950);
}

/* Actions du formulaire */
.profile-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding-top: 1rem;
}

/* Dans la rangée d'actions, .auth-submit (bouton Enregistrer) ne doit pas
   porter son margin-top de contexte formulaire (login), sinon il est décalé
   vers le bas par rapport à Supprimer / Annuler. On l'aligne en hauteur sur
   les autres boutons (mêmes padding/bordure ; on neutralise juste l'écart de
   font-size pour une hauteur identique). */
.profile-actions .auth-submit {
  margin-top: 0;
  font-size: 0.78rem;
  flex: 0 0 auto;
  width: auto;
}

/* Boutons compacts dans la rangée d'actions des modales (photo de profil,
   etc.) : padding horizontal réduit pour que les 3 boutons tiennent à droite
   sans déborder de la largeur du contenu. flex-wrap ci-dessus = filet de
   sécurité (passage à la ligne plutôt que débordement) sur écrans étroits. */
.profile-actions .btn,
.profile-actions .btn-danger,
.profile-actions .btn-secondary-outline {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

/* Modale photo de profil : les 3 boutons occupent des largeurs égales et
   remplissent toute la ligne (plus élégant que groupés avec de grands écarts).
   Scopé à #avatarModal pour ne pas modifier le formulaire profil ni les autres
   modales d'action. En mobile, la règle .profile-actions button { width:100% }
   + flex-direction:column-reverse reprend la main (empilement). */
#avatarModal .profile-actions > button {
  flex: 1 1 0;
}

.btn-secondary-outline {
  background: transparent;
  color: var(--navy-950);
  border: 1px solid var(--line);
  padding: 0.95rem 1.8rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.btn-secondary-outline:hover {
  border-color: var(--navy-950);
  background: rgba(1, 21, 45, 0.04);
}

/* Confirmation */
.profile-success {
  background: white;
  padding: 4rem 3rem;
  border: 1px solid var(--line);
  text-align: center;
  border-radius: 3px;
  animation: successFadeIn 0.5s ease-out;
}

/* Responsive profil */
@media (max-width: 768px) {
  .profile-completion {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .profile-section {
    padding: 1.5rem 1.4rem;
  }
  .profile-grid-photo {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .profile-photo-wrap {
    text-align: center;
  }
  .profile-offer-grid {
    grid-template-columns: 1fr;
  }
  .keyword-input-wrap {
    flex-direction: column;
  }
  .keyword-add-btn {
    padding: 0.95rem;
  }
  .profile-actions {
    flex-direction: column-reverse;
  }
  .profile-actions button {
    width: 100%;
  }
  /* En mobile, l'override desktop .profile-actions .auth-submit { width:auto }
     a une spécificité supérieure et empêcherait le bouton Enregistrer de passer
     pleine largeur comme les autres. On le neutralise ici (sélecteur de même
     spécificité, dans la media query → l'emporte par ordre de cascade). */
  .profile-actions .auth-submit {
    width: 100%;
  }
}

/* ========== ANNUAIRE DES MEMBRES ========== */
.directory-toolbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.directory-search-wrap {
  flex: 1;
  min-width: 280px;
  position: relative;
}

.directory-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-500);
  pointer-events: none;
}

.directory-search {
  width: 100%;
  padding: 0.95rem 1rem 0.95rem 2.8rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.25s ease;
}

.directory-search:focus {
  outline: none;
  border-color: var(--gold-500);
}

.directory-search:focus-visible {
  box-shadow: 0 0 0 3px rgba(183, 144, 68, 0.25);
}

.directory-count {
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Filtres catégories */
.directory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.directory-filter-btn {
  padding: 0.6rem 1.1rem;
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 2px;
  white-space: nowrap;
}

.directory-filter-btn:hover {
  border-color: var(--gold-500);
  color: var(--navy-950);
  background: rgba(183, 144, 68, 0.05);
}

.directory-filter-btn.is-active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: var(--cream);
  font-weight: 600;
}

/* Grille des membres */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}

.directory-grid .member-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(1, 21, 45, 0.07);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* Override du text-align:center hérité de .member-card (03-public.css, carte
     vitrine accueil) : le contenu de la carte annuaire est aligné à gauche. */
  text-align: left;
  box-shadow:
    0 2px 6px rgba(1, 21, 45, 0.04),
    0 10px 30px rgba(1, 21, 45, 0.07);
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s ease;
}

/* Filet doré supérieur qui se déploie au survol (accent animé signature). */
.directory-grid .member-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 3;
}

.directory-grid .member-card:hover {
  transform: translateY(-6px);
  border-color: rgba(183, 144, 68, 0.35);
  box-shadow:
    0 6px 16px rgba(1, 21, 45, 0.08),
    0 24px 48px rgba(1, 21, 45, 0.16);
}

.directory-grid .member-card:hover::before {
  transform: scaleX(1);
}

/* En-tête sur dégradé navy, version compacte : padding réduit et voile doré
   discret pour que le bandeau soit moins dominant et laisse respirer le nom. */
.directory-grid .member-card-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(183, 144, 68, 0.12), transparent 62%),
    linear-gradient(135deg, var(--navy-900), var(--navy-800));
}

/* Avatar premium scopé : anneau doré + photo en cover (override du global
   .member-avatar, qui reste inchangé pour l'accueil et la modale). */
.directory-grid .member-avatar {
  width: 54px;
  height: 54px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(183, 144, 68, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.directory-grid .member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.directory-grid .member-card:hover .member-avatar {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--gold-400), 0 6px 16px rgba(0, 0, 0, 0.3);
}

.directory-grid .member-card-identity {
  min-width: 0;
  flex: 1;
}

.directory-grid .member-card-name {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.18;
  margin-bottom: 0.2rem;
  /* Nom complet visible : on autorise 2 lignes plutôt qu'une troncature qui
     coupait les noms longs ("Christophe LECO…"). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.directory-grid .member-card-role {
  font-size: 0.78rem;
  color: var(--gold-400);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Nom de société (3e ligne de l'en-tête) : police display (Cormorant) dorée,
   distincte du nom de personne (StraightHyphen) pour faire ressortir la marque. */
.directory-grid .member-card-company-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gold-400);
  line-height: 1.15;
  margin-top: 0.22rem;
}

.directory-grid .member-card-body {
  padding: 1.1rem 1.4rem 1.2rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

/* Secteur d'activité (groupe) : eyebrow doré, agrandi et calé à gauche. */
.directory-grid .member-card-sector {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-600);
  text-align: left;
}

/* Localisation "Ville (CP)" : épingle dorée + texte, agrandie et calée à gauche. */
.directory-grid .member-card-location {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.4;
}

.directory-grid .member-card-location svg {
  color: var(--gold-600);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

/* Description (profiles.activity) : zone agrandie (jusqu'à 6 lignes) pour en
   montrer davantage. */
.directory-grid .member-card-desc {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.directory-grid .member-card-footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem 0.7rem 1.2rem;
  border-top: 1px solid var(--line);
  background: rgba(245, 239, 227, 0.5);
}

/* Mots-clés sur une seule ligne défilante (marquee). Le conteneur masque le
   débordement et applique un léger fondu sur les bords. */
.directory-grid .member-card-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

.directory-grid .member-card-kw-track {
  display: flex;
  width: max-content;
  animation: cap-kw-marquee 16s linear infinite;
}

/* Pause au survol pour laisser le temps de lire. */
.directory-grid .member-card:hover .member-card-kw-track {
  animation-play-state: paused;
}

/* Pas de défilement si les mots-clés tiennent déjà (classe posée en JS) :
   on masque le 2e jeu dupliqué et on fige la piste. */
.directory-grid .member-card-marquee.is-static .member-card-kw-track {
  animation: none;
}
.directory-grid .member-card-marquee.is-static .member-card-kw-set[aria-hidden] {
  display: none;
}

.directory-grid .member-card-kw-set {
  display: flex;
  gap: 6px;
  padding-right: 6px;
  flex-shrink: 0;
}

.directory-grid .member-card-kw {
  padding: 3px 10px;
  background: rgba(183, 144, 68, 0.12);
  border: 1px solid rgba(183, 144, 68, 0.3);
  color: var(--navy-950);
  font-size: 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

@keyframes cap-kw-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .directory-grid .member-card-kw-track { animation: none; }
}

/* Action : pastille ronde navy avec flèche dorée (la carte entière est déjà
   cliquable ; cette pastille est une affordance décorative, aria-hidden). */
.directory-grid .member-card-go {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy-950);
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.2s ease;
}

.directory-grid .member-card:hover .member-card-go {
  transform: translateX(2px);
  background: var(--navy-900);
}

/* .member-avatar et .member-tag globaux conservés ci-dessous : partagés avec
   l'aperçu accueil et la modale membre, ne pas scoper. */
.member-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
}

.member-tag {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  background: rgba(183, 144, 68, 0.1);
  border: 1px solid rgba(183, 144, 68, 0.25);
  color: var(--navy-950);
  font-size: 0.72rem;
  border-radius: 2px;
  font-weight: 500;
}

/* État vide annuaire */
.directory-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border: 1px dashed var(--line);
  border-radius: 2px;
}

.directory-empty svg {
  color: var(--gold-500);
  opacity: 0.6;
  margin-bottom: 1rem;
}

.directory-empty p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.directory-empty p span {
  font-size: 0.85rem;
  color: rgba(86, 100, 121, 0.7);
  font-style: italic;
}

/* Modale fiche membre */
.member-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1.5rem;
  overflow-y: auto;
  /* Garde-fou : aucune modale ne doit créer de scroll horizontal,
     même si un widget natif iOS (select, textarea) déborde */
  overflow-x: hidden;
}

.member-modal.is-open {
  display: flex !important;
}

.member-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 21, 45, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
}

.member-modal-content {
  position: relative;
  z-index: 2;
  background: var(--cream);
  width: 100%;
  max-width: 760px;
  margin: auto;
  padding: 3rem 3rem 3.5rem;
  border-radius: 2px;
  animation: modalFadeIn 0.4s ease-out;
}

.member-modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--gold-500);
  color: var(--navy-950);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(1, 21, 45, 0.2);
}

.member-modal-close:hover {
  background: var(--navy-950);
  color: var(--cream);
}

.member-detail-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(183, 144, 68, 0.25);
  margin-bottom: 1.8rem;
}

.member-detail-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 600;
}

.member-detail-name {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy-950);
  line-height: 1.1;
  margin: 0 0 0.4rem 0;
}

.member-detail-role {
  font-size: 0.95rem;
  color: var(--gold-500);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.member-detail-company {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 600;
}

.member-detail-section {
  margin-bottom: 1.8rem;
}

.member-detail-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.7rem;
}

.member-detail-text {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

.member-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.member-detail-item {
  background: white;
  border-left: 3px solid var(--gold-500);
  padding: 1rem 1.2rem;
  border-radius: 2px;
}

.member-detail-item.item-give {
  border-left-color: var(--green-500);
}

.member-detail-item.item-search {
  border-left-color: #2c4674;
}

.member-detail-item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-950);
  margin-bottom: 0.5rem;
}

.member-detail-item-text {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.member-detail-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.2s ease;
}

.contact-link:hover {
  border-color: var(--gold-500);
  background: rgba(183, 144, 68, 0.04);
}

.contact-link svg {
  color: var(--gold-500);
  flex-shrink: 0;
}

.member-detail-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.member-detail-actions {
  display: flex;
  gap: 0.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(183, 144, 68, 0.25);
  margin-top: 1.5rem;
}

.member-detail-actions .btn {
  flex: 1;
  justify-content: center;
}

/* Responsive annuaire */
@media (max-width: 768px) {
  .directory-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .directory-search-wrap {
    min-width: 0;
    width: 100%;
  }
  .directory-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    width: 100%;
  }
  .directory-filter-btn {
    flex-shrink: 0;
  }
  .directory-grid {
    grid-template-columns: 1fr;
  }
  .member-modal-content {
    padding: 2rem 1.5rem 2.5rem;
  }
  .member-detail-header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  .member-detail-avatar {
    margin: 0 auto;
  }
  .member-detail-grid,
  .member-detail-contact {
    grid-template-columns: 1fr;
  }
  .member-detail-actions {
    flex-direction: column;
  }
}

/* ========== MISES EN RELATION ========== */
.relations-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Compteurs d'onglets relations (sur les .admin-tab dans #espaceRelations) */
.relations-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.5rem;
  background: rgba(183, 144, 68, 0.15);
  color: var(--gold-500);
  border-radius: 11px;
  font-size: 0.72rem;
  font-weight: 700;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
  margin-left: 0.3rem;
}

#espaceRelations .admin-tab.is-active .relations-tab-count {
  background: var(--gold-500);
  color: white;
}

/* Pipeline / résumé par statut */
.relations-pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

/* Header section + filtres statuts */
.relations-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.relations-section-title {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0;
}

.relations-section-title em {
  color: var(--gold-500);
  font-style: normal;
}

/* Liste des demandes */
.relations-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.relation-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.3rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  transition: all 0.25s ease;
  position: relative;
}

.relation-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.relation-item:hover {
  border-color: var(--gold-500);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(1, 21, 45, 0.06);
}

.relation-item:hover::before {
  transform: scaleY(1);
}

/* Animation de mise en valeur quand on arrive depuis le centre de notifications */
.relation-item.is-highlighted {
  animation: relationHighlight 2.4s ease-out;
}

.relation-item.is-highlighted::before {
  transform: scaleY(1);
}

@keyframes relationHighlight {
  0% {
    background: rgba(183, 144, 68, 0.18);
    box-shadow: 0 0 0 3px rgba(183, 144, 68, 0.45),
                0 8px 24px rgba(1, 21, 45, 0.12);
    border-color: var(--gold-500);
  }
  35% {
    background: rgba(183, 144, 68, 0.12);
    box-shadow: 0 0 0 3px rgba(183, 144, 68, 0.3),
                0 8px 24px rgba(1, 21, 45, 0.1);
    border-color: var(--gold-500);
  }
  100% {
    background: white;
    box-shadow: 0 0 0 0 rgba(183, 144, 68, 0);
    border-color: var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .relation-item.is-highlighted {
    animation: none;
    background: rgba(183, 144, 68, 0.12);
    border-color: var(--gold-500);
  }
}

.relation-item-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  flex-shrink: 0;
}

.relation-item-content {
  min-width: 0;
}

.relation-item-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}

.relation-item-target {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-950);
}

/* Conteneur des badges (statut + outcome) à droite du nom dans la carte */
.relation-item-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Badge d'issue (outcome) : Opportunité / À suivre / Sans suite.
   Affiché à côté du badge de statut quand la mise en relation a été effectuée.

   Note : --outcome-bg et --outcome-color sont volontairement laissées comme
   variables locales surchargeables (jamais définies dans 00-tokens.css).
   Elles permettent à .outcome-badge[data-outcome="opportunity|follow_up|no_follow"]
   de redéfinir les couleurs sans dupliquer la règle de base. Fallbacks
   gold inclus pour le cas par défaut sans data-outcome. */
.outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.28rem 0.6rem 0.28rem 0.5rem;
  background: var(--outcome-bg, rgba(183, 144, 68, 0.12));
  color: var(--outcome-color, var(--gold-500));
  border: 1px solid var(--outcome-color, var(--gold-500));
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.outcome-badge svg {
  flex-shrink: 0;
}

.relation-item-subject {
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.relation-item-meta {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.relation-item-meta svg {
  flex-shrink: 0;
  color: var(--gold-500);
}

/* Contexte et réponse de mise en relation */
.relation-item-context {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0.4rem 0 0.7rem 0;
  padding: 0.7rem 0.9rem;
  background: rgba(245, 239, 227, 0.5);
  border-left: 2px solid var(--gold-400);
  border-radius: 2px;
}

.relation-response-block {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0.4rem 0 0.7rem 0;
  padding: 0.7rem 0.9rem;
  background: rgba(44, 70, 116, 0.05);
  border-left: 2px solid #2c4674;
  border-radius: 2px;
}

.relation-response-block strong {
  color: #2c4674;
  font-weight: 600;
}

/* Bloc coordonnées partagées (demande acceptée) */
/* Sections numérotées dans le formulaire de mise en relation */
.rel-form-section {
  margin-bottom: 2rem;
  padding: 1.4rem 1.5rem 1.6rem;
  background: rgba(245, 239, 227, 0.35);
  border: 1px solid rgba(183, 144, 68, 0.18);
  border-radius: 3px;
}

.rel-form-section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-950);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.rel-form-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-500);
  color: white;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-weight: 600;
  font-feature-settings: "lnum" 1;
  flex-shrink: 0;
}

.rel-form-section-help {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.55;
  margin: -0.4rem 0 1rem 0;
}

.rel-form-section-help strong {
  color: var(--ink);
  font-weight: 600;
}

/* Toggle (segmented control) pour choisir le type de contact à présenter */
.rel-contact-type-toggle {
  display: grid;
  /* 3 colonnes pour les 3 modes : Self / Externe / Membre.
     Le mode "Self" ("C'est moi") permet au demandeur de se proposer
     lui-même comme contact (cas d'usage typique : réponse à une annonce). */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  background: rgba(245, 239, 227, 0.6);
  border: 1px solid rgba(183, 144, 68, 0.25);
  border-radius: 3px;
  padding: 0.35rem;
  margin-bottom: 1.1rem;
}

/* Carte de destinataire verrouillé : affichée à la place du dropdown quand
   le destinataire est imposé par le contexte (réponse à une annonce).
   Visuel cohérent avec .rel-self-card mais avec un cadenas pour signaler
   que le choix est verrouillé. */
.rel-target-locked-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: rgba(245, 239, 227, 0.5);
  border: 1px solid rgba(183, 144, 68, 0.3);
  border-left: 3px solid var(--gold-500);
  border-radius: 3px;
}

.rel-target-locked-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(183, 144, 68, 0.18);
  color: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.rel-target-locked-body {
  flex: 1;
  min-width: 0;
}

.rel-target-locked-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.rel-target-locked-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.rel-target-locked-company {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.rel-target-locked-hint {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.45rem;
}

@media (max-width: 640px) {
  /* Sur mobile : empile verticalement les 3 onglets pour garder la
     lisibilité des libellés. */
  .rel-contact-type-toggle {
    grid-template-columns: 1fr;
  }
}

.rel-contact-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.rel-contact-type-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.rel-contact-type-btn:hover {
  color: var(--navy-950);
}

.rel-contact-type-btn.is-active {
  background: var(--navy-950);
  color: var(--cream);
  box-shadow: 0 2px 6px rgba(1, 21, 45, 0.18);
}

.rel-contact-type-btn.is-active svg {
  color: var(--gold-400);
}

/* Bloc affiché quand un membre est sélectionné comme contact à présenter */
/* Carte "C'est moi" affichée quand l'utilisateur choisit l'onglet Self.
   Pas de formulaire à remplir : on affiche juste un récap visuel des
   coordonnées qui seront transmises (issues du profil club du demandeur)
   et un message rassurant. */
.rel-self-card {
  background: rgba(245, 239, 227, 0.5);
  border: 1px solid rgba(183, 144, 68, 0.3);
  border-left: 3px solid var(--gold-500);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
}

.rel-self-card-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(183, 144, 68, 0.2);
}

.rel-self-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-950);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.rel-self-card-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.rel-self-card-company {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.rel-self-card-body p {
  margin: 0 0 0.6rem 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}

.rel-self-card-body p:last-child {
  margin-bottom: 0;
}

.rel-self-card-hint {
  font-size: 0.82rem !important;
  color: var(--muted) !important;
  font-style: italic;
}

/* Badge spécifique pour les self-propositions dans la liste des relations.
   Coloration dorée pour mettre en avant l'engagement direct du membre,
   distinct des recommandations de tiers (membres ou contacts externes). */
.relation-contact-block.is-self-proposed {
  border-left-color: var(--gold-500);
  background: linear-gradient(to right, rgba(183, 144, 68, 0.06) 0%, transparent 60%);
}

.relation-contact-block.is-self-proposed .relation-contact-label {
  color: var(--gold-500);
  font-weight: 600;
}

.rel-member-preview {
  display: none;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(183, 144, 68, 0.22);
  border-radius: 3px;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
}

.rel-member-preview.is-visible {
  display: block;
}

.rel-member-preview strong {
  color: var(--navy-950);
  font-weight: 600;
}

/* Layout 2 colonnes pour les champs courts */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row .form-group {
  margin-bottom: 1rem;
}

@media (max-width: 568px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.relation-contact-block {
  margin: 0.7rem 0;
  padding: 0.95rem 1.1rem;
  border: 1px solid;
  border-radius: 3px;
}

.relation-contact-block.is-pending {
  background: rgba(183, 144, 68, 0.05);
  border-color: rgba(183, 144, 68, 0.25);
}

.relation-contact-block.is-accepted {
  background: rgba(76, 145, 80, 0.06);
  border-color: rgba(76, 145, 80, 0.2);
}

.relation-contact-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.relation-contact-block.is-pending .relation-contact-label { color: #8a6a30; }
.relation-contact-block.is-accepted .relation-contact-label { color: var(--green-500); }

/* Le contact externe lui-même */
.relation-external-name {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-950);
  line-height: 1.2;
}

.relation-external-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.relation-coords-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.relation-coords-locked svg {
  color: var(--gold-500);
  flex-shrink: 0;
}

/* Choix d'issue dans la modale Marquer comme effectuée */
.outcome-choices {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.outcome-choice {
  display: block;
  cursor: pointer;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1.5px solid rgba(86, 100, 121, 0.18);
  border-radius: 4px;
  transition: all 0.18s ease;
  position: relative;
}

.outcome-choice:hover {
  border-color: rgba(183, 144, 68, 0.5);
  background: rgba(245, 239, 227, 0.4);
}

.outcome-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.outcome-choice-content {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.outcome-choice-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(86, 100, 121, 0.08);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.outcome-choice-text {
  flex: 1;
}

.outcome-choice-title {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-950);
  line-height: 1.2;
}

.outcome-choice-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* États sélectionnés selon l'outcome */
.outcome-choice.is-selected {
  background: rgba(245, 239, 227, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.outcome-choice[data-outcome="opportunity"].is-selected {
  border-color: var(--gold-500);
}
.outcome-choice[data-outcome="opportunity"].is-selected .outcome-choice-icon {
  background: rgba(183, 144, 68, 0.15);
  color: var(--gold-500);
}

.outcome-choice[data-outcome="follow_up"].is-selected {
  border-color: #2c4674;
}
.outcome-choice[data-outcome="follow_up"].is-selected .outcome-choice-icon {
  background: rgba(44, 70, 116, 0.12);
  color: #2c4674;
}

.outcome-choice[data-outcome="no_follow"].is-selected {
  border-color: #6b7689;
}
.outcome-choice[data-outcome="no_follow"].is-selected .outcome-choice-icon {
  background: rgba(107, 118, 137, 0.15);
  color: #6b7689;
}

/* Bloc "Mise en relation effectuée" (statut connected) */
.relation-effective-block {
  margin: 0.7rem 0;
  padding: 0.95rem 1.1rem;
  background: rgba(76, 145, 80, 0.08);
  border: 1px solid rgba(76, 145, 80, 0.25);
  border-radius: 3px;
}

.relation-effective-block.is-opportunity {
  background: rgba(183, 144, 68, 0.08);
  border-color: rgba(183, 144, 68, 0.3);
}
.relation-effective-block.is-opportunity .relation-effective-header svg {
  color: var(--gold-500);
}
.relation-effective-block.is-opportunity .relation-effective-label {
  color: #8a6a30;
}

.relation-effective-block.is-follow-up {
  background: rgba(44, 70, 116, 0.06);
  border-color: rgba(44, 70, 116, 0.22);
}
.relation-effective-block.is-follow-up .relation-effective-header svg {
  color: #2c4674;
}
.relation-effective-block.is-follow-up .relation-effective-label {
  color: #2c4674;
}

/* Variante "minimal" : utilisée pour les statuts "Sans suite" qui ne méritent
   pas de bloc d'en-tête (pas d'icône ni de label) car le statut rouge en haut
   de carte suffit. On garde uniquement les notes éventuelles dans un fond
   cream très discret, qui se distingue visuellement des autres blocs sans
   attirer l'œil. */
.relation-effective-block.is-minimal {
  background: rgba(245, 239, 227, 0.6);
  border-color: rgba(183, 144, 68, 0.2);
}

.relation-effective-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.relation-effective-header svg {
  color: var(--green-500);
  flex-shrink: 0;
}

.relation-effective-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2f6c33;
}

.relation-effective-date {
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: auto;
}

.relation-effective-notes {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(76, 145, 80, 0.2);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  /* Empêche les longues notes sans espaces (URLs, emails dans le texte)
     de déborder horizontalement de la carte */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Bloc "Affaires déclarées" : badge doré affiché sur les demandes reçues
   ayant généré du business via le module Business. Visuellement aligné
   sur .relation-effective-block (même padding/border-radius) pour cohérence. */
.relation-business-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.7rem 0;
  padding: 0.85rem 1.1rem;
  background: rgba(183, 144, 68, 0.1);
  border: 1px solid rgba(183, 144, 68, 0.3);
  border-radius: 3px;
}

.relation-business-block svg {
  color: var(--gold-500);
  flex-shrink: 0;
}

.relation-business-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a30;
}

.relation-business-amount {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #2f6c33;
  line-height: 1;
  font-feature-settings: "lnum" 1;
}

.relation-business-detail {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

/* ============================================================
   ANTI-DÉBORDEMENT MOBILE - Zone Relations membre
   ============================================================
   Garde-fou global pour empêcher tout décalage horizontal dans
   l'historique des demandes (envoyées et reçues). Les coupables
   habituels sont : emails longs, numéros internationaux formatés,
   noms d'entreprises sans espace, dates longues françaises, etc. */

/* Conteneur principal : pas de scroll horizontal possible */
#espaceRelations {
  max-width: 100%;
  overflow-x: hidden;
}

/* Liste des relations : empêche tout débordement de carte */
.relations-list {
  max-width: 100%;
  overflow-x: hidden;
}

/* Chaque carte ne peut jamais dépasser son conteneur */
.relation-item {
  max-width: 100%;
  /* min-width: 0 critique pour les enfants flex/grid : sans ça, les
     éléments avec du contenu long ne peuvent pas se compresser */
  min-width: 0;
}

/* Le contenu textuel doit pouvoir se casser proprement.
   overflow-wrap: anywhere → casse aux limites des mots OU n'importe où
   si nécessaire (emails, URLs, mots ultra-longs) */
.relation-item-content,
.relation-item-target,
.relation-item-subject,
.relation-item-context,
.relation-external-name,
.relation-external-subtitle,
.relation-effective-date,
.relation-response-block {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Liens email/téléphone : peuvent être très longs, doivent se casser */
.relation-contact-link {
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Sur mobile très étroit, on garantit que le lien ne déborde pas
     même s'il contient un email long ou un numéro international */
  max-width: 100%;
}

.relation-contact-links {
  max-width: 100%;
  /* min-width: 0 indispensable dans un parent flex/grid pour permettre
     aux enfants flex de se compresser correctement */
  min-width: 0;
}

.relation-contact-block {
  max-width: 100%;
  min-width: 0;
}

.relation-effective-block {
  max-width: 100%;
  min-width: 0;
}

.relation-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
}

.relation-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--navy-950);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.relation-contact-link:hover {
  color: var(--gold-500);
}

.relation-contact-link svg {
  color: var(--green-500);
  flex-shrink: 0;
}

/* Badges statut */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-new { background: rgba(44, 70, 116, 0.12); color: #2c4674; }
.status-new::before { background: #2c4674; }
.status-ongoing { background: rgba(192, 142, 44, 0.15); color: #8d6520; }
.status-ongoing::before { background: #c08e2c; }
.status-connected { background: rgba(76, 145, 80, 0.15); color: #2f6c33; }
.status-connected::before { background: var(--green-500); }
.status-opportunity { background: rgba(183, 144, 68, 0.18); color: #8a6a30; }
.status-opportunity::before { background: var(--gold-500); }
.status-closed { background: rgba(74, 56, 86, 0.15); color: #4a3856; }
.status-closed::before { background: #4a3856; }
.status-declined { background: rgba(196, 69, 61, 0.12); color: var(--red-700); }
.status-declined::before { background: var(--red-500); }
/* Sans suite : aligné sur "Refusée" (même rouge) car les deux ont la même
   nature finale (mise en relation qui n'aboutit pas). Cohérent avec la carte
   du dashboard "Refusées / Sans suite" qui les regroupe déjà. */
.status-no_follow { background: rgba(196, 69, 61, 0.12); color: var(--red-700); }
.status-no_follow::before { background: var(--red-500); }

/* Actions sur item */
.relation-item-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.relation-action-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.25s ease;
}

.relation-action-btn:hover {
  border-color: var(--gold-500);
  background: rgba(183, 144, 68, 0.08);
}

.relation-action-btn.is-primary {
  background: var(--navy-950);
  color: var(--cream);
  border-color: var(--navy-950);
}

.relation-action-btn.is-primary:hover {
  background: var(--gold-500);
  color: var(--navy-950);
  border-color: var(--gold-500);
}

/* État vide */
.relations-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border: 1px dashed var(--line);
  border-radius: 2px;
}

.relations-empty svg {
  color: var(--gold-500);
  opacity: 0.6;
  margin-bottom: 1rem;
}

.relations-empty p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.relations-empty p span {
  font-size: 0.85rem;
  color: rgba(86, 100, 121, 0.7);
  font-style: italic;
}

/* Responsive relations */
@media (max-width: 968px) {
  .relations-pipeline {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .relations-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #espaceRelations .admin-tabs {
    width: 100%;
  }
  #espaceRelations .admin-tab {
    flex: 1;
    justify-content: center;
  }
  .relations-pipeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .relations-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  #relationsStatusFilter {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
  }
  #relationsStatusFilter .admin-status-btn {
    flex-shrink: 0;
  }
  .relation-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .relation-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* ========== BUSINESS DÉCLARÉ ========== */
.business-stats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.business-stat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.5rem 1.6rem;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.business-stat-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(1, 21, 45, 0.06);
}

.business-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
}

.business-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.business-stat-value {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--gold-500);
  line-height: 1;
  margin: 0.2rem 0 0.3rem;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

.business-stat-meta {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Carte primaire (Total déclaré) */
.business-stat-primary {
  background: linear-gradient(135deg, var(--navy-950) 0%, #1a2d4f 100%);
  color: var(--cream);
  border-color: var(--navy-950);
  position: relative;
  overflow: hidden;
}

.business-stat-primary::before {
  content: "€";
  position: absolute;
  top: -1rem;
  right: 0.5rem;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 8rem;
  color: rgba(183, 144, 68, 0.12);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}

.business-stat-primary:hover {
  border-color: var(--gold-500);
}

.business-stat-primary .business-stat-label {
  color: var(--gold-400);
}

.business-stat-primary .business-stat-value {
  color: var(--gold-400);
  font-size: 3rem;
}

.business-stat-primary .business-stat-meta {
  color: rgba(245, 239, 227, 0.75);
}

/* ============================================================
   Top contributeurs : "Vos meilleurs apporteurs d'affaires"
   Liste compacte des origines triées par CA généré.
   ============================================================ */
.business-top-origins {
  background: white;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-500);
  border-radius: 3px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}

.business-top-origins-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.business-top-origins-header svg {
  color: var(--gold-500);
  flex-shrink: 0;
}

.business-top-origins-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.business-top-origins-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.business-top-origin-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0;
}

.business-top-origin-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), #8a6a30);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.business-top-origin-info {
  flex: 1;
  min-width: 0;
}

.business-top-origin-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-top-origin-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.business-top-via-connection {
  background: rgba(183, 144, 68, 0.1);
  color: var(--gold-500);
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  margin-left: 0.2rem;
  cursor: help;
}

.business-top-origin-amount {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #2f6c33;
  font-feature-settings: "lnum" 1;
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .business-top-origins {
    padding: 1.1rem 1.2rem;
  }
  .business-top-origin-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.72rem;
  }
  .business-top-origin-name {
    font-size: 0.88rem;
  }
  .business-top-origin-amount {
    font-size: 1.05rem;
  }
}

/* Toolbar */
.business-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.business-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.business-status-btn {
  padding: 0.55rem 1rem;
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 2px;
}

.business-status-btn:hover {
  border-color: var(--gold-500);
  background: rgba(183, 144, 68, 0.05);
}

.business-status-btn.is-active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: var(--cream);
  font-weight: 600;
}

/* Liste / tableau */
.business-list-wrap {
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.business-list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 120px;
  gap: 1rem;
  padding: 0.9rem 1.4rem;
  background: rgba(1, 21, 45, 0.04);
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  /* Centrage vertical pour le cas où un titre serait sur 2 lignes (cohérent
     avec le pattern .admin-table-header). */
  align-items: center;
  line-height: 1.3;
}

/* Modificateurs is-center / is-right pour les cellules — même API que les
   tableaux admin. Permet d'aligner statut, date, montant en une ligne sans
   ajouter de classes spécifiques par colonne. Pour les rows, on utilise
   flexbox column pour empiler proprement les contenus multi-éléments
   (badge + sous-info, par exemple). */
.business-list-header > .is-center,
.business-list-header > .is-right {
  /* Header : juste l'alignement texte, pas de flex (le contenu est texte simple). */
}
.business-list-header > .is-center { text-align: center; }
.business-list-header > .is-right { text-align: right; }

.business-row > .is-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.business-row > .is-right { text-align: right; }

.business-list {
  display: flex;
  flex-direction: column;
}

.business-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 120px;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}

.business-row:last-child { border-bottom: none; }

.business-row:hover {
  background: rgba(245, 239, 227, 0.5);
}

.business-row-origin {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.business-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.business-row-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-row-name-sub {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge discret indiquant qu'une affaire est née d'une mise en relation
   reçue via le club (vs déclaration spontanée). Utilisé côté membre et
   côté admin dans la liste business. */
.business-row-connection-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-500);
  background: rgba(183, 144, 68, 0.1);
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: help;
}

.business-row-connection-link svg {
  flex-shrink: 0;
}

.business-row-amount {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy-950);
  line-height: 1;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
  /* Aligné à droite pour correspondre au header "Montant" qui est lui-même
     en is-right. Cohérent avec le tableau admin (.admin-row-amount). */
  text-align: right;
}

.business-row-amount.amount-invoiced {
  color: var(--gold-500);
}

.business-row-status {
  display: inline-flex;
}

.biz-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}

.biz-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.biz-status-ongoing { background: rgba(192, 142, 44, 0.15); color: #8d6520; }
.biz-status-ongoing::before { background: #c08e2c; }
.biz-status-invoiced { background: rgba(76, 145, 80, 0.15); color: #2f6c33; }
.biz-status-invoiced::before { background: var(--green-500); }

.business-row-date {
  font-size: 0.85rem;
  color: var(--muted);
}

.business-row-actions {
  display: flex;
  gap: 0.3rem;
  /* Centrés pour s'aligner avec le titre "Actions" du header (centré aussi).
     Cohérent avec le pattern des tableaux admin. */
  justify-content: center;
}

.biz-action-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.biz-action-btn:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: rgba(183, 144, 68, 0.05);
}

.biz-action-btn.is-danger:hover {
  border-color: var(--red-500);
  color: var(--red-500);
  background: rgba(196, 69, 61, 0.05);
}

.biz-action-btn.is-success {
  border-color: rgba(76, 145, 80, 0.4);
  color: #2f6c33;
}
.biz-action-btn.is-success:hover {
  border-color: var(--green-500);
  color: #2f6c33;
  background: rgba(76, 145, 80, 0.08);
}

.business-row-comment {
  display: none;
  grid-column: 1 / -1;
  padding: 1rem 0 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
}

.business-row.is-expanded {
  display: grid;
}

.business-row.is-expanded .business-row-comment {
  display: block;
}

/* État vide */
.business-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border: 1px dashed var(--line);
  border-radius: 2px;
}

.business-empty svg {
  color: var(--gold-500);
  opacity: 0.6;
  margin-bottom: 1rem;
}

.business-empty p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.business-empty p span {
  font-size: 0.85rem;
  color: rgba(86, 100, 121, 0.7);
  font-style: italic;
}

/* Responsive business */
@media (max-width: 968px) {
  .business-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .business-list-header {
    display: none;
  }
  .business-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.6rem 1rem;
    padding: 1.2rem 1.2rem;
  }
  .business-row-origin {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .business-row-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .business-row-amount {
    grid-column: 1;
    grid-row: 2;
  }
  .business-row-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .business-row-date {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }
}

@media (max-width: 568px) {
  .business-stats {
    grid-template-columns: 1fr;
  }
  .business-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .business-status-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .business-status-btn {
    flex-shrink: 0;
  }
}

/* ========== OPPORTUNITÉS & BESOINS ========== */

/* Barre d'action principale au-dessus de la toolbar : contient le bouton
   "Nouvelle annonce" mis en avant, à gauche. Séparée de la toolbar pour
   donner de la visibilité à l'action de création. */
.opp-action-bar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.opp-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.opp-search-wrap {
  flex: 1;
  min-width: 280px;
  position: relative;
}

.opp-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-500);
  pointer-events: none;
}

/* Recherche alignée sur .admin-search (mêmes valeurs : padding, font-size,
   transition) pour cohérence visuelle entre l'espace membre et l'espace
   administrateur. */
.opp-search {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  transition: border-color 0.25s ease;
}

.opp-search:focus {
  outline: none;
  border-color: var(--gold-500);
}

.opp-search:focus-visible {
  box-shadow: 0 0 0 3px rgba(183, 144, 68, 0.25);
}

/* Bouton "Nouvelle annonce" dans la toolbar : aligné en hauteur sur le bouton
   "Actualiser" admin (.admin-refresh-btn) pour que tous les éléments de la
   toolbar membre aient la même hauteur visuelle. Padding + typographie
   identiques. La couleur (fond marine, texte crème) reproduit le bouton
   primaire du thème CAP. */
.opp-toolbar .btn,
.opp-publish-btn {
  padding: 0.85rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.opp-publish-btn {
  background: var(--navy-950);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
}

/* Catégories — temporairement masquées (catégories en cours de stabilisation).
   Les classes restent définies pour pouvoir remettre rapidement les filtres
   plus tard sans devoir recoder le CSS. */
.opp-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.opp-category-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 2px;
}

.opp-category-btn:hover {
  border-color: var(--gold-500);
  background: rgba(183, 144, 68, 0.05);
}

.opp-category-btn.is-active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: var(--cream);
  font-weight: 600;
}

.opp-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.opp-cat-clients { background: #2c4674; }
.opp-cat-prestataire { background: var(--green-500); }
.opp-cat-partenaire { background: var(--gold-500); }
.opp-cat-recommandation { background: #c08e2c; }
.opp-cat-business { background: #4a3856; }
.opp-cat-offre { background: var(--red-500); }

.opp-cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.4rem;
  background: rgba(183, 144, 68, 0.15);
  color: var(--gold-500);
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

.opp-category-btn.is-active .opp-cat-count {
  background: var(--gold-500);
  color: var(--navy-950);
}

/* Filtres secondaires */
.opp-secondary-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.opp-urgency-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  /* Pousse les filtres urgence à droite de la toolbar pour les séparer
     visuellement du groupe principal (recherche + actualiser + nouvelle
     annonce). Sur mobile (flex-wrap), les filtres passent à la ligne sous
     le reste — le margin-left:auto n'a alors plus d'effet. */
  margin-left: auto;
}

.opp-filter-label {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-right: 0.4rem;
}

/* Filtres urgence alignés sur le pattern .admin-status-btn (admin) :
   même hauteur, même typographie (gras + letter-spacing), même couleur
   crème pour les icônes quand le bouton est actif. Cohérence visuelle
   entre l'espace membre et l'espace administrateur. */
.opp-urgency-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.9rem;
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 2px;
}

.opp-urgency-btn:hover {
  border-color: var(--gold-500);
}

.opp-urgency-btn.is-active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: var(--cream);
}

/* Icône bascule en crème quand bouton actif, même règle que côté admin. */
.opp-urgency-btn.is-active .admin-filter-icon {
  color: var(--cream);
}

.urgency-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.urgency-high { background: var(--red-500); }
.urgency-medium { background: #c08e2c; }
.urgency-low { background: var(--green-500); }

/* Variantes ajoutées pour les filtres de l'onglet Annonces (admin) afin que
   chaque filtre ait sa propre puce de couleur cohérente avec les badges
   de statut affichés dans le tableau. */
.urgency-all { background: var(--navy-950); }       /* Toutes : neutre marine */
.urgency-closed { background: #4a3856; }            /* Clôturées : violet sombre */
.urgency-expired { background: #6b7689; }           /* Expirées : gris bleuté */

.opp-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.opp-sort-select {
  /* Même hauteur que .opp-urgency-btn et .admin-status-btn pour cohérence
     visuelle de toute la barre de filtres. */
  padding: 0.85rem 0.9rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
}

.opp-sort-select:focus {
  outline: none;
  border-color: var(--gold-500);
}

.opp-sort-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(183, 144, 68, 0.25);
}

/* Grille des annonces */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.4rem;
}

.opp-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.opp-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gold-500);
}

.opp-card.cat-clients::before { background: #2c4674; }
.opp-card.cat-prestataire::before { background: var(--green-500); }
.opp-card.cat-partenaire::before { background: var(--gold-500); }
.opp-card.cat-recommandation::before { background: #c08e2c; }
.opp-card.cat-business::before { background: #4a3856; }
.opp-card.cat-offre::before { background: var(--red-500); }

.opp-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(1, 21, 45, 0.1);
}

.opp-card-header {
  padding: 1.3rem 1.4rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.opp-card-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.opp-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}

.opp-category-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.cat-clients-bg { background: rgba(44, 70, 116, 0.12); color: #2c4674; }
.cat-clients-bg::before { background: #2c4674; }
.cat-prestataire-bg { background: rgba(76, 145, 80, 0.15); color: #2f6c33; }
.cat-prestataire-bg::before { background: var(--green-500); }
.cat-partenaire-bg { background: rgba(183, 144, 68, 0.15); color: #8a6a30; }
.cat-partenaire-bg::before { background: var(--gold-500); }
.cat-recommandation-bg { background: rgba(192, 142, 44, 0.15); color: #8d6520; }
.cat-recommandation-bg::before { background: #c08e2c; }
.cat-business-bg { background: rgba(74, 56, 86, 0.15); color: #4a3856; }
.cat-business-bg::before { background: #4a3856; }
.cat-offre-bg { background: rgba(196, 69, 61, 0.15); color: #a23a32; }
.cat-offre-bg::before { background: var(--red-500); }

.opp-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}

.urgency-badge-high { background: rgba(196, 69, 61, 0.15); color: #a23a32; }
.urgency-badge-medium { background: rgba(192, 142, 44, 0.12); color: #8d6520; }
.urgency-badge-low { background: rgba(76, 145, 80, 0.12); color: #2f6c33; }

.opp-card-title {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy-950);
  line-height: 1.25;
  margin: 0;
}

.opp-card-need {
  font-size: 0.85rem;
  color: var(--gold-500);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.opp-card-body {
  padding: 0.5rem 1.4rem 1rem;
  flex: 1;
}

.opp-card-description {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.opp-card-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line);
  background: rgba(245, 239, 227, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.opp-card-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.opp-card-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}

.opp-card-author-name {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opp-card-date {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Modale détail annonce */
.opp-detail-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(183, 144, 68, 0.25);
  margin-bottom: 1.5rem;
}

.opp-detail-meta-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.opp-detail-title {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--navy-950);
  line-height: 1.2;
  margin: 0 0 0.4rem 0;
}

.opp-detail-need {
  font-size: 0.92rem;
  color: var(--gold-500);
  font-weight: 500;
}

.opp-detail-section {
  margin-bottom: 1.5rem;
}

.opp-detail-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.7rem;
}

/* Label/value : utilisés par les sections "Type de besoin", "Description"
   et "Date de publication" de la modale de détail. Reprennent le style
   du section-title pour les labels (or, majuscules, espacé) et un style
   propre et lisible pour les valeurs. */
.opp-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.5rem;
}

.opp-detail-value {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}

.opp-detail-description {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
  /* Bloc clair pour faire ressortir la description, qui est souvent le
     contenu le plus important de l'annonce. */
  background: var(--cream);
  padding: 1.1rem 1.2rem;
  border-radius: 4px;
  border-left: 3px solid var(--gold-500);
}

.opp-detail-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* Bloc "auteur" complet de la modale détail : avatar + nom + entreprise +
   méta-info (date de publication). Utilisé par le rendu JS qui produit
   <div class="opp-detail-author-block"> contenant l'avatar à gauche et
   les infos auteur à droite. Différencié de .opp-detail-author qui est
   un ancien style plus minimal. */
.opp-detail-author-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin: 1.5rem 0;
}

.opp-detail-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}

.opp-detail-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  flex-shrink: 0;
}

.opp-detail-author-info {
  flex: 1;
}

.opp-detail-author-name {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy-950);
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.opp-detail-author-company {
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/* Date de publication, visiblement distincte (couleur plus discrète,
   taille plus petite, italique pour rappeler que c'est de la méta-info). */
.opp-detail-author-meta {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* Bloc "contact direct" : affiché quand l'auteur a indiqué un contact
   téléphone ou email accessible directement (alternative à la demande
   de mise en relation). Visuel mis en avant avec accent or pour attirer
   l'œil sur cette info actionnable. */
.opp-detail-direct-contact {
  background: rgba(183, 144, 68, 0.08);
  border: 1px solid rgba(183, 144, 68, 0.35);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

.opp-detail-direct-contact strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.4rem;
}

.opp-detail-direct-contact a {
  color: var(--navy-900);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(1, 21, 45, 0.3);
}

.opp-detail-direct-contact a:hover {
  border-bottom-color: var(--navy-900);
}

.opp-detail-actions {
  display: flex;
  gap: 0.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(183, 144, 68, 0.25);
  margin-top: 1.5rem;
}

.opp-detail-actions .btn {
  flex: 1;
  justify-content: center;
}

/* ============================================================
   Bandeaux de statut (carte + modale détail)
   ------------------------------------------------------------
   Affichés uniquement pour l'auteur sur ses propres opps non
   publiées (pending_review, rejected, expired, closed).
   ============================================================ */
.opp-card-status-banner {
  padding: 0.5rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.opp-card-status-banner.is-pending {
  background: rgba(192, 142, 44, 0.12);
  color: #8d6520;
}
.opp-card-status-banner.is-rejected {
  background: rgba(196, 69, 61, 0.12);
  color: var(--red-700);
}
.opp-card-status-banner.is-expired {
  background: rgba(86, 100, 121, 0.10);
  color: #4a5468;
}
.opp-card-status-banner.is-closed {
  background: rgba(74, 56, 86, 0.10);
  color: #4a3856;
}

/* Variantes de carte selon le statut : opacité légèrement réduite pour
   les opps non-actives (closed/expired) afin de signaler visuellement
   leur état "en sommeil" sans pour autant les rendre illisibles. */
.opp-card.is-closed,
.opp-card.is-expired {
  opacity: 0.78;
}
.opp-card.is-pending-review {
  border: 1px dashed rgba(192, 142, 44, 0.45);
}
.opp-card.is-rejected {
  border: 1px solid rgba(196, 69, 61, 0.35);
}

/* Bandeau de statut dans la modale détail : plus visible (encadré complet)
   pour bien attirer l'œil quand l'auteur ouvre sa propre annonce non publiée. */
.opp-detail-status-banner {
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem 0;
  border-radius: 3px;
  font-size: 0.88rem;
  line-height: 1.55;
  border-left: 3px solid;
}
.opp-detail-status-banner strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.opp-detail-status-banner.is-pending {
  background: rgba(192, 142, 44, 0.08);
  border-left-color: #c08e2c;
  color: #6e4f1a;
}
.opp-detail-status-banner.is-rejected {
  background: rgba(196, 69, 61, 0.08);
  border-left-color: var(--red-500);
  color: #7a2924;
}
.opp-detail-status-banner.is-expired {
  background: rgba(86, 100, 121, 0.08);
  border-left-color: #6b7689;
  color: #3a4256;
}
.opp-detail-status-banner.is-closed {
  background: rgba(74, 56, 86, 0.08);
  border-left-color: #4a3856;
  color: #3a2944;
}
.opp-detail-status-banner.is-expiring {
  background: rgba(196, 69, 61, 0.06);
  border-left-color: var(--red-500);
  color: #7a2924;
  font-style: italic;
}

/* Variante "danger" pour les boutons de suppression dans les modales opp.
   Ne change pas la couleur de base (.btn-secondary-outline) mais teinte
   au survol pour signaler le caractère destructif. */
.opp-btn-danger:hover {
  border-color: var(--red-500) !important;
  color: var(--red-500) !important;
  background: rgba(196, 69, 61, 0.06) !important;
}

/* État vide */
.opp-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border: 1px dashed var(--line);
  border-radius: 2px;
}

.opp-empty svg {
  color: var(--gold-500);
  opacity: 0.6;
  margin-bottom: 1rem;
}

.opp-empty p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.opp-empty p span {
  font-size: 0.85rem;
  color: rgba(86, 100, 121, 0.7);
  font-style: italic;
}

/* Responsive opportunités */
@media (max-width: 768px) {
  .opp-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .opp-search-wrap {
    min-width: 0;
    width: 100%;
  }
  .opp-categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    width: 100%;
  }
  .opp-category-btn {
    flex-shrink: 0;
  }
  .opp-secondary-filter {
    flex-direction: column;
    align-items: stretch;
  }
  .opp-urgency-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .opp-urgency-btn {
    flex-shrink: 0;
  }
  .opp-grid {
    grid-template-columns: 1fr;
  }
  .opp-detail-actions {
    flex-direction: column;
  }
}

/* ============================================================
   ANNONCES ↔ MISES EN RELATION (Cas 1, 2, 3)
   ============================================================ */

/* Cas 3 — Lien retour vers l'annonce, sur la carte de mise en relation */
.relation-opportunity-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0.2rem 0;
  padding: 0.3rem 0.6rem;
  background: rgba(183, 144, 68, 0.08);
  border: 1px solid rgba(183, 144, 68, 0.25);
  border-radius: 4px;
  color: var(--navy-950);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
  max-width: 100%;
}
.relation-opportunity-link:hover {
  background: rgba(183, 144, 68, 0.16);
  border-color: rgba(183, 144, 68, 0.45);
}
.relation-opportunity-link svg {
  flex-shrink: 0;
  color: var(--gold-500);
}
.relation-opportunity-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Cas 1a — Compteur de réponses sur la carte d'annonce (côté auteur) */
.opp-card-responses-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 1rem 0.6rem 1rem;
  padding: 0.35rem 0.7rem;
  background: rgba(76, 145, 80, 0.10);
  border: 1px solid rgba(76, 145, 80, 0.25);
  border-radius: 999px;
  color: #2f6e34;
  font-size: 0.78rem;
  font-weight: 600;
  align-self: flex-start;
}
.opp-card-responses-badge svg {
  color: var(--green-500);
}

/* Cas 1b — Liste des réponses dans la modale détail (côté auteur) */
.opp-detail-responses-loading,
.opp-detail-responses-empty,
.opp-detail-responses-error {
  font-size: 0.9rem;
  color: var(--muted, #566479);
  font-style: italic;
  padding: 0.6rem 0;
}
.opp-detail-responses-error {
  color: var(--red-700);
  font-style: normal;
}
.opp-detail-responses-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.opp-response-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: #fbfaf6;
  border: 1px solid var(--line, #e8e4d8);
  border-left: 3px solid var(--gold-500, var(--gold-500));
  border-radius: 4px;
}
.opp-response-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy-950, #1a2540);
  color: var(--cream, #f5f1e8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.opp-response-content {
  flex: 1;
  min-width: 0;
}
.opp-response-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.opp-response-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink, #1a2540);
}
.opp-response-subtitle {
  font-size: 0.82rem;
  color: var(--muted, #566479);
  margin-top: 0.1rem;
}
.opp-response-self-badge {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.15rem 0.5rem;
  background: rgba(183, 144, 68, 0.15);
  color: #8d6520;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
}
.opp-response-message {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink, #1a2540);
  font-style: italic;
}
.opp-response-meta {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted, #566479);
}

/* Cas 2 — Bandeau "Vous avez déjà répondu" dans la modale détail */
.opp-detail-already-answered {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  background: rgba(76, 145, 80, 0.08);
  border: 1px solid rgba(76, 145, 80, 0.25);
  border-radius: 4px;
}
.opp-detail-already-answered svg {
  flex-shrink: 0;
  color: var(--green-500);
  margin-top: 0.1rem;
}
.opp-detail-already-answered-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink, #1a2540);
}
.opp-detail-already-answered-meta {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted, #566479);
  line-height: 1.5;
}
.opp-detail-already-answered-meta a {
  color: var(--navy-950, #1a2540);
  text-decoration: underline;
}
.opp-detail-already-answered-meta a:hover {
  color: var(--gold-500, var(--gold-500));
}