/* ==========================================================================
   ALTAIDE — REQUEST CARDS (Mes demandes, abonnements, connexions)
   Replaces assets/css/cards.css. Load AFTER tokens.css and base.css.
   The card shell (.req-card background/border/radius/shadow) is in base.css.
   ========================================================================== */

.req-card { overflow: hidden; }

/* The slider stretches cards to equal height; the footer follows the bottom
   whatever the content length. */
.active-subscriptions-list .req-card,
.pending-list-container .req-card {
  display: flex;
  flex-direction: column;
}

.active-subscriptions-list .sub-card-footer-bar,
.pending-list-container .req-body { margin-top: auto; }

/* Refused / declined: fade the non-interactive parts only, so the action
   button never looks disabled. */
.pending-list-container .req-card.refused-card .req-header,
.pending-list-container .req-card.refused-card .req-price-row,
#active-requests-list .req-card.refused-card .req-header-info,
#active-requests-list .req-card.refused-card .req-status { opacity: 0.55; }

.req-card.refused-card .req-avatar { filter: grayscale(80%); }

/* --- Header -------------------------------------------------------------- */

.req-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.req-header-info { display: flex; align-items: center; gap: var(--space-3); }

.req-avatar {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: none;
  border-radius: var(--radius-chip);
}

.req-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.req-name {
  font-family: var(--font-titles);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.req-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.req-status { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-main); }

.req-btn-delete {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: 0;
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-subtle);
  cursor: pointer;
  transition: color var(--transition);
}

.req-btn-delete:hover { color: var(--color-danger); }

/* --- Info chips ---------------------------------------------------------- */

.req-info-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.req-info-chip .icon { font-size: var(--text-sm); color: var(--text-subtle); }

/* --- Price row ----------------------------------------------------------- */

.req-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0 var(--space-4) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-chip);
}

.req-price-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.req-price-badge {
  font-family: var(--font-titles);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.req-subline {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.req-subline .icon { font-size: var(--text-sm); color: var(--text-subtle); }

/* --- Body ---------------------------------------------------------------- */

.req-body { padding: 0 var(--space-4) var(--space-4); }

.req-cg-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.req-meta-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.req-meta-item { display: flex; flex-direction: column; gap: var(--space-1); }
.req-meta-item.right { text-align: right; align-items: flex-end; }

.req-meta-label { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-muted); }

.req-meta-value {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.req-meta-icon { color: var(--text-subtle); }
.req-meta-unit { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-muted); }

/* --- Services ------------------------------------------------------------ */

.req-services { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }

/* --- Footer actions ------------------------------------------------------ */

.req-footer { padding-top: var(--space-2); }

.req-btn {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.req-btn-accent { color: var(--color-accent-ink); border-color: var(--color-accent); }
.req-btn-accent:hover { background: var(--color-accent); color: var(--text-on-accent); }

.req-btn-success { color: var(--color-success); border-color: var(--color-success); }
.req-btn-archive { background: var(--surface-sunken); color: var(--text-muted); }
.req-btn-chat { color: var(--text-main); box-shadow: none; }
.req-btn-chat:hover { background: var(--surface-sunken); }


/* --- SUBSCRIPTION ROW (view-home) --------------------------------------
   Remplace le carrousel .snap-slider-container des cartes d'abonnement.
   Une seule ligne, identique pour la famille et pour l'aidant.
   .sub-days-left et .sub-status-block restent les points d'accroche que
   refreshHomeSubscriptionCards() (timer.js) réécrit après une visite. */

.sub-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* En-tête de groupe : n'apparaît qu'au-delà de 3 lignes. */
.sub-list-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.sub-list-group.is-urgent { color: var(--color-warning); }

.sub-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 76px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.sub-row:hover { border-color: var(--border-strong); }
.sub-row:active { border-color: var(--border-strong); box-shadow: none; }
.sub-row.is-done { opacity: 0.72; }

.sub-row-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.sub-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sub-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.sub-row-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-titles);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
  color: var(--text-strong);
}

/* Nom de l'aidant, après le nom du protégé (rôle famille). */
.sub-row-name .sub-row-cg {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  color: var(--text-muted);
}

.sub-days-left {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.sub-days-left.is-urgent {
  color: var(--color-warning);
  font-weight: var(--weight-semibold);
}

.sub-status-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sub-row-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.sub-row-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width var(--transition-slow);
}

.sub-row.is-done .sub-row-bar > span { background: var(--border-strong); }

.sub-row-hours {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.sub-row-hours .hours-used-number {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.empty-state {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i {
    font-size: 80px;
    color: #cbd5e1; /* Un gris-bleu très doux */
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.empty-state-text {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto;
}
/* ---------- RESULTS : CARTE AIDANT -------------------------------------- */
.cg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  transition: border-color var(--transition);
}
.cg-card + .cg-card { margin-top: var(--space-3); }
.cg-card:hover { border-color: var(--border-strong); }
.cg-card.is-contacted .cg-card-total { color: var(--text-muted); }
.cg-card.is-contacted .cg-card-photo { opacity: .55; }
/* Le nom et les métadonnées restent lisibles : la mise en retrait passe par la
   photo et la puce de statut, pas par le contraste du texte. */

.cg-card-top { display: flex; gap: var(--space-3); align-items: flex-start; }
.cg-card-photo {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-sunken);
}
.cg-card-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cg-card-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
.cg-card-line:last-child { align-items: center; margin-top: 2px; }

.cg-card-name {
  font-family: var(--font-titles);
  font-size: var(--text-lg); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title); color: var(--text-strong);
}
.cg-card-total {
  font-family: var(--font-titles);
  font-size: var(--text-lg); font-weight: var(--weight-bold);
  color: var(--text-strong); flex-shrink: 0;
}
.cg-card-place {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--text-muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-card-place .icon { color: var(--text-subtle); font-size: 15px; flex-shrink: 0; }
.cg-card-cycle {
  font-size: 13px; font-weight: var(--weight-semibold);
  color: var(--text-muted); flex-shrink: 0;
}
.cg-card-rate { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }

.cg-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--radius-chip);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.cg-flag .icon { font-size: 14px; }
.cg-flag-match  { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.cg-flag-status { background: var(--surface-sunken); color: var(--text-muted); }

.cg-card-services {
  display: flex; align-items: center; gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-sunken);
  overflow: hidden;
}
.cg-service-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-sunken); color: var(--text-main);
  border-radius: var(--radius-chip); padding: 5px 9px;
  font-size: 13px; font-weight: var(--weight-semibold); white-space: nowrap;
}
.cg-service-chip .icon { color: var(--color-accent-ink); font-size: 15px; }
.cg-service-more { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); }

/* La bordure corail pleine carte n'a plus de rôle : la puce suffit. */
.caregiver-card.perfect-border { border-color: var(--border); }

/* ---------- RESULTS : ÉTAT VIDE ----------------------------------------- */
.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 22px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-3); text-align: left;
}
.empty-state-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface-sunken); color: var(--text-subtle);
  display: flex; align-items: center; justify-content: center;
}
.empty-state-icon .icon { font-size: 26px; }
.empty-state-title {
  margin: 0; font-family: var(--font-titles);
  font-size: var(--text-lg); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title); color: var(--text-strong);
}
.empty-state-text {
  margin: 0; font-size: var(--text-base); line-height: var(--leading-normal);
  color: var(--text-main); max-width: none; text-wrap: pretty;
}
.empty-state-actions {
  display: flex; flex-direction: column; gap: var(--space-2);
  width: 100%; margin-top: var(--space-1);
}

/* ---------- FEUILLE « DEMANDE ENVOYÉE » --------------------------------- */
.sheet-sent {
  padding: 28px var(--space-6) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.sent-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sent-check {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--color-success-soft); color: var(--color-success);
  display: flex; align-items: center; justify-content: center;
}
.sent-check .icon { font-size: 26px; }
.sent-title {
  margin: 0; font-family: var(--font-titles);
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title); color: var(--text-strong);
}
.sent-intro {
  margin: 0; font-size: 15px; line-height: var(--leading-normal);
  color: var(--text-main); text-wrap: pretty;
}

.sent-steps { list-style: none; margin: 0; padding: 0; }
.sent-step { display: flex; gap: 14px; }
.sent-step > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-5); }
.sent-step:last-child > div { padding-bottom: 0; }
.sent-step-dot {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-subtle);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.sent-step-dot .icon { font-size: 16px; }
/* Le trait qui relie les puces, tiré depuis la puce elle-même. */
.sent-step:not(:last-child) .sent-step-dot::after {
  content: ""; position: absolute; top: 28px; left: 13px;
  width: 2px; height: calc(100% + var(--space-5) - 28px);
  background: var(--border);
}
.sent-step.is-done .sent-step-dot { background: var(--color-success); color: #fff; }
.sent-step.is-current .sent-step-dot { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.sent-step-title {
  font-family: var(--font-titles); font-size: 15px;
  font-weight: var(--weight-bold); color: var(--text-main);
}
.sent-step.is-done .sent-step-title,
.sent-step.is-current .sent-step-title { color: var(--text-strong); }
.sent-step-text { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }

.sent-actions { display: flex; flex-direction: column; gap: 10px; }
/* ---------- RESULTS : RAPPEL DE LA DEMANDE ------------------------------ */
.results-recap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: var(--space-3);
  display: flex; flex-direction: column; gap: 10px;
}
.recap-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.recap-label {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.recap-hours {
  font-size: 13px; font-weight: var(--weight-semibold);
  color: var(--text-main); flex-shrink: 0;
}
.recap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recap-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-sunken); color: var(--text-main);
  border-radius: 9px; padding: 4px 8px;
  font-size: 12px; font-weight: var(--weight-semibold); white-space: nowrap;
}
.recap-chip .icon { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }

/* ---------- HOME : LIGNE DE CONNEXION ----------------------------------- */
.conn-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* --- REMPLACE le bloc .conn-row du patch « lignes de connexion » -------- */
.conn-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color var(--transition);
}
.conn-row:has(.conn-row-head:hover) { border-color: var(--border-strong); }
.conn-row.is-refused-row { opacity: .7; }

.conn-row-head {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min);
  cursor: pointer;
}

/* --- NOUVEAU ------------------------------------------------------------ */
.conn-row-actions {
  display: flex; gap: var(--space-2);
  padding-top: 10px;
  border-top: 1px solid var(--surface-sunken);
}
.conn-row-actions > button {
  flex: 1; min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.conn-row-actions .icon { font-size: 20px; flex-shrink: 0; }

.btn-row-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-weight: var(--weight-semibold);
}
.btn-row-ghost:hover { border-color: var(--border-strong); color: var(--text-strong); }

.btn-row-primary {
  background: var(--color-accent);
  border: none;
  color: var(--text-on-accent);
  font-weight: var(--weight-bold);
}
.btn-row-primary:hover { background: var(--color-accent-strong); }
.btn-row-amount { font-variant-numeric: tabular-nums; }
.conn-row:hover { border-color: var(--border-strong); }
.conn-row.is-refused-row { opacity: .7; }

.conn-row-avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; object-fit: cover;
  background: var(--surface-sunken);
}
.conn-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.conn-row-top,
.conn-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.conn-row-bottom { align-items: baseline; }

.conn-row-name {
  font-family: var(--font-titles);
  font-size: var(--text-base); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conn-row-meta {
  font-size: 13px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conn-row-price {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-main); flex-shrink: 0;
}

.conn-status {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: var(--surface-sunken); color: var(--text-muted);
  border-radius: 8px; padding: 3px 7px;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .04em; text-transform: uppercase;
}
.conn-status .icon { font-size: 12px; }
.conn-status.is-ok,
.conn-status.is-ready { background: var(--color-success-soft); color: var(--color-success); }
.conn-status.is-refused { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---------- HOME : PROPOSITION REÇUE (AIDANT) --------------------------- */
.prop-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.prop-row + .prop-row { margin-top: var(--space-2); }
.prop-row-head { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.prop-row-avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; object-fit: cover;
  background: var(--surface-sunken);
}
.prop-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.prop-row-top,
.prop-row-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

.prop-row-name {
  font-family: var(--font-titles);
  font-size: var(--text-base); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prop-row-net {
  font-family: var(--font-titles);
  font-size: var(--text-base); font-weight: var(--weight-bold);
  color: var(--text-strong); flex-shrink: 0;
}
.prop-row-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--text-muted);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prop-row-meta .icon { color: var(--text-subtle); font-size: 13px; flex-shrink: 0; }
.prop-row-net-label {
  font-size: 12px; font-weight: var(--weight-semibold);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); flex-shrink: 0;
}

.prop-row-actions {
  display: flex; gap: var(--space-2);
  padding-top: 10px;
  border-top: 1px solid var(--surface-sunken);
}
.prop-row-actions > .btn-refuse,
.prop-row-actions > .btn-accept { flex: 1; min-height: var(--tap-min); }
/* Les états acceptée / refusée gardent leur pile verticale. */
.prop-row-actions > .card-action-accepted,
.prop-row-actions > .status-confirmed { flex: 1; }

/* ---------- MES RECHERCHES : CARTE DE BESOIN ---------------------------- */
#active-requests-list { display: flex; flex-direction: column; gap: var(--space-3); }

.need-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.need-card.is-live { border-color: var(--color-success-border, #C7E3D6); }

.need-head { padding: 14px 16px 12px; display: flex; align-items: center; gap: var(--space-3); }
.need-avatar,
.need-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; object-fit: cover;
  background: var(--surface-sunken);
}
.need-icon {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft); color: var(--color-accent-ink);
}
.need-icon .icon { font-size: 22px; }
.need-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.need-label {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.need-name {
  font-family: var(--font-titles);
  font-size: 18px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.need-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--surface-sunken); color: var(--text-muted);
  border-radius: 9px; padding: 4px 9px;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .04em; text-transform: uppercase;
}
.need-chip .icon { font-size: 13px; }
.need-chip.is-ok { background: var(--color-success-soft); color: var(--color-success); }
.need-chip.is-live { background: var(--color-success); color: #fff; }

/* Récap : la seule zone de la carte qui ouvre le détail de la demande. */
.need-recap {
  margin: 0 16px; padding: 11px 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle, #EAEFF5);
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.need-recap:hover { border-color: var(--border-strong); }
.need-recap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.need-recap-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-main); }
/* nowrap obligatoire : « dès le 8 sept. » se coupe sinon en deux lignes
   dès que la carte est un peu étroite. */
.need-recap-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.need-recap-meta .icon { color: var(--text-subtle); font-size: 14px; }
.need-recap-arrow { color: var(--text-subtle); font-size: 18px; flex-shrink: 0; }

.need-services { display: flex; flex-wrap: wrap; gap: 5px; }
.need-service {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border-subtle, #E4EAF1);
  color: var(--text-main); border-radius: 8px; padding: 3px 7px;
  font-size: 12px; font-weight: var(--weight-semibold);
}
.need-service .icon { color: var(--color-accent-ink); font-size: 13px; flex-shrink: 0; }

/* Lignes d'aidant : 32 px, hauteur constante. */
.need-rows { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 2px; }
.need-rows-label {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding-bottom: 6px;
}
.need-row {
  padding: 9px 10px; margin: 0 -10px;
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap-min);
  cursor: pointer;
}
.need-row:hover { background: var(--surface-sunken); }
.need-row-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: var(--surface-sunken); }
.need-row-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.need-row-name {
  font-family: var(--font-titles);
  font-size: 15px; font-weight: var(--weight-bold);
  color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.need-row-when {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.need-row-wrap { display: flex; flex-direction: column; }

.need-row-actions {
  display: flex; gap: var(--space-2);
  justify-content: flex-end;
  padding: 0px 0 2px 52px;
}
.need-row-actions > button {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
}
.need-actions:not(:has(.need-btn)) .need-icon-btn:first-of-type { margin-left: auto; }
.need-row-when.is-ok { color: var(--color-success); font-weight: var(--weight-semibold); }
.need-row-price {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-main); flex-shrink: 0;
  min-width: 48px; text-align: right;
}
.need-row-kill {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 2px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.need-row-kill:hover { background: var(--danger-soft); color: var(--danger); }
.need-row-kill .icon { font-size: 1rem; }
.need-none { margin: 12px 16px 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.need-more {
  width: 100%;
  min-height: var(--tap-min);
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  border-radius: 14px;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.need-more:hover {
  border-style: solid;
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--surface-sunken);
}
.need-more .icon { font-size: 1.1rem; }
.need-actions {
  margin: 12px 16px 14px; padding-top: 12px;
  border-top: 1px solid var(--surface-sunken);
  display: flex; gap: var(--space-2);
}
.need-card .need-none + .need-actions { border-top: none; padding-top: 0; }
.need-btn {
  flex: 1; min-height: var(--tap-min);
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text-main);
  font-size: 15px; font-weight: var(--weight-semibold);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.need-btn:hover { background: var(--surface-sunken); }
.need-btn.is-accent {
  border: none;
  background: var(--color-accent); color: var(--text-on-accent);
  font-weight: var(--weight-bold);
}
.need-btn.is-accent:hover { background: var(--color-accent-hover); }
.need-icon-btn {
  width: var(--tap-min); height: var(--tap-min); flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.need-icon-btn:hover { background: var(--surface-sunken); color: var(--text-main); }
.need-icon-btn.is-danger:hover {
  background: var(--color-danger-soft); border-color: var(--color-danger-border, #F5C9C3);
  color: var(--color-danger);
}