/* ==========================================================================
   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);
}

/* Fin de période passée, webhook Stripe pas encore arrivé (« Renouvellement »,
   « Terminé ») : un état normal, pas une attente — pastille fixe et calme.
   Pas d'animation : sur une heure, un cercle qui tourne se lit comme un
   chargement bloqué. La phrase .sub-row-hint dit combien de temps ça prend. */
.sub-days-left.is-renewing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-main);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.sub-days-left.is-renewing .icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-muted); }

/* Phrase sous la barre pendant le renouvellement. */
.sub-row-hint {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--text-muted);
}

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

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

.sub-row-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  /* Plus la barre est pleine, plus elle est foncée. --pct (0-100) est posé
     en inline par view-home.php et timer.js, à côté de width. */
  background: var(--text-main); /* repli si color-mix n'est pas supporté */
  background: color-mix(in oklch, var(--text-main) calc(var(--pct, 100) * 1%), var(--border-strong));
  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; }
/* ---------- HOME : CARTE BANCAIRE À METTRE À JOUR ----------------------- */
/* Une ligne, entièrement cliquable. Pas de bordure ni de fond blanc : la forme
   ne doit ressembler à aucune carte d'abonnement de la liste. */
.card-alert-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  margin-bottom: var(--space-5);
  padding: 10px 14px;
  background: var(--color-warning-soft);
  border-radius: 14px;
  color: var(--color-warning);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition);
}

.card-alert-banner:hover,
.card-alert-banner:active {
  background: color-mix(in oklch, var(--color-warning-soft), var(--color-warning) 8%);
}

.card-alert-banner:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}

.card-alert-icon { width: 22px; height: 22px; flex-shrink: 0; }

.card-alert-text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--text-strong);
}

.card-alert-cta {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-warning);
}

.card-alert-chevron { width: 18px; height: 18px; flex-shrink: 0; margin-left: -6px; }

/* ---------- 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-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-main);
}
.recap-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.recap-meta .icon { color: var(--text-subtle); font-size: 14px; 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); }
/* Demandes reçues : empilées l'une sous l'autre, comme les lignes d'abonnement (.sub-list), au lieu du carrousel
   horizontal. L'espacement entre cartes vient de la règle ci-dessus ; la marge basse reprend celle du carrousel. */
.prop-list { margin-bottom: var(--space-5); }
.prop-row-head { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
/* Le bloc d'en-tête ouvre le récapitulatif de la demande : une ligne l'annonce (pas de flèche), et le toucher répond. */
.prop-row-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-accent-ink); }
.prop-row-more .icon { font-size: 14px; }
.prop-row-head:active .prop-row-more { text-decoration: underline; }
.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;
  transition: border-color var(--transition);
}
.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-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; }
/* Au-delà de trois services, le reste est replié derrière une puce +N :
   la carte garde sa hauteur dans la liste, et rien n'est perdu pour autant.
   Le même bouton replie, son libellé suit l'état du conteneur. */
.need-service.is-extra { display: none; }
.need-services.is-expanded .need-service.is-extra { display: inline-flex; }

.need-service-more .more-close,
.need-services.is-expanded .need-service-more .more-open { display: none; }
.need-services.is-expanded .need-service-more .more-close { display: inline; }

.need-service-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-chip);
    background: none;
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    cursor: pointer;
}

.need-service-more:active { background: var(--surface-sunken); }
/* 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(--accent); }
.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);
}
/* ---------- Raccourci compteur sur la carte d'abonnement (aidant) ----------
   Bouton rond à droite : ouvre le compteur avec ce client et son dernier
   service présélectionnés. Vert avec le temps quand une visite y est en
   cours ; grisé si une visite ne peut pas démarrer (raison au toucher). */
.sub-row-play {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--color-accent, #FF8A80);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.sub-row-play:active { transform: scale(0.94); }
.sub-row-play .sub-row-play-time { display: none; font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.sub-row-play.is-blocked { background: var(--bg, #F1F5F9); color: var(--text-muted); }
.sub-row-play.is-live { background: #10b981; font-size: 0.95rem; }
.sub-row-play.is-live .sub-row-play-time { display: block; }


/* Famille : pas de démarrage, le bouton n'apparaît que pendant une visite. */
.sub-row-play.is-family:not(.is-live) { display: none; }

/* ---------- Visite en cours : capsule façon Dynamic Island ----------
   Le rond s'étire en capsule verte (ressort), un point vert respire, les
   chiffres changés défilent vers le haut (setRollingText, timer.js). */
.sub-row-play {
  transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease, transform var(--transition);
}
.sub-row-play.is-live {
  width: 92px;
  height: 38px;
  border-radius: 19px;
  flex-direction: row;
  gap: 8px;
  padding: 0 12px 0 11px;
  background: #10b981;
  font-size: 0.95rem;
}
.sub-row-play.is-live .sub-row-play-icon { display: none; }
.sub-row-play.is-live::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  animation: liveDot 2s ease-in-out infinite;
}
.sub-row-play.is-live .sub-row-play-time {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  display: inline-flex;
}
@keyframes liveDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
}

/* Chiffres qui défilent : chaque caractère dans sa fenêtre d'1 ligne. */
.roll-char { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; vertical-align: top; }
.roll-char > span { display: block; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
.roll-char.is-rolling > span { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .sub-row-play, .roll-char > span { transition: none; }
  .sub-row-play.is-live::before { animation: none; }
}

/* ---------- Titre de la liste d'abonnements ---------- */
.home-greeting { margin-bottom: var(--space-2); }
/* Aidant en cours d'inscription : « Bienvenue Pierre » est le titre du bloc .cg-onb, dont le sous-titre doit rester
   collé dessous (4 px, comme quand le bloc avait son propre titre) — pas les marges d'un en-tête de page. */
.home-header.is-cg-onb { margin-bottom: 0; }
.home-header.is-cg-onb .home-greeting { margin-bottom: 0; }
.sub-list-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-2) 0 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Heures potentielles par semaine (aidant) : à côté du compteur, discret, sur la même ligne (le point est décoratif, hors du texte). */
.sub-list-hours {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}
.sub-list-hours::before { content: '\00b7'; margin-right: 8px; }
.sub-list-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--border);
  color: var(--text-main);
  font-size: 0.72rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ---------- Photos du carnet de liaison (VisitPhotos, timer.js) ---------- */
.visit-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.visit-photos.hidden { display: none; }
.vp-thumb, .vp-add {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
}
.vp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  background: var(--bg);
}
.visit-photos.is-compact { flex-basis: 100%; margin: 8px 0 0; }
.visit-photos.is-compact .vp-thumb { width: 44px; height: 44px; border-radius: 9px; }
.visit-photos.is-compact .vp-thumb img { border-radius: 9px; }
.vp-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1e293b;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.vp-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.vp-add .icon { font-size: 1.3rem; }
.vp-add.is-loading { pointer-events: none; opacity: 0.5; }
.vp-add.is-loading .icon { animation: vpPulse 1s ease-in-out infinite; }
@keyframes vpPulse { 50% { transform: scale(0.85); } }

.vp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(10, 14, 22, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vpFade 0.2s ease;
}
.vp-lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.vp-lightbox button {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.vp-lb-close { top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; }
.vp-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.vp-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.vp-lb-count {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
}
@keyframes vpFade { from { opacity: 0; } }
/* ---------- Avis des familles (ReviewsEngine, reviews.js) ---------- */
.rv-stars { color: #f5a524; letter-spacing: 1px; white-space: nowrap; }
.rv-stars-off { color: var(--border); }
.rv-stars.is-small { font-size: 0.85rem; }

.rv-prompt {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--color-accent, #FF8A80);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.rv-prompt-head { display: flex; align-items: center; gap: 12px; }
.rv-prompt-head img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); }
.rv-prompt-title { margin: 0; font-family: var(--font-titles); font-weight: 700; color: var(--text-strong); font-size: 1rem; }
.rv-prompt-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.rv-prompt-refused { margin: 10px 0 0; font-size: 0.8rem; color: var(--color-warning); }
.rv-prompt-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--text-muted); }
.rv-later { border: none; background: none; color: var(--text-muted); font-weight: 600; font-size: 0.82rem; padding: 6px 0; cursor: pointer; }

.rv-star-input { display: flex; gap: 4px; }
.rv-star-input button {
  border: none; background: none; padding: 2px; cursor: pointer;
  font-size: 1.35rem; line-height: 1; color: var(--border);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s;
}
.rv-star-input button.on { color: #f5a524; }
.rv-star-input button:active { transform: scale(1.25); }
.rv-star-input.is-big, .rv-prompt-stars { justify-content: center; margin: 12px 0 8px; }
.rv-star-input.is-big button, .rv-prompt-stars button { font-size: 2.2rem; padding: 2px 4px; }

.rv-sheet { max-width: 520px; }
.rv-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.rv-crit-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-main); }
.rv-q { margin: 6px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--text-strong); }
.rv-yesno { display: flex; gap: 8px; }
.rv-yesno button { flex: 1; padding: 9px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; color: var(--text-main); cursor: pointer; }
.rv-yesno button.on { background: var(--color-accent, #FF8A80); border-color: transparent; color: #fff; }
.rv-form textarea, .rv-reply-form textarea {
  width: 100%; min-height: 84px; resize: none; padding: 10px 12px;
  border: 2px solid #f1f5f9; border-radius: 14px; font: inherit; font-size: 0.9rem; outline: none;
}
.rv-hint { margin: 0; font-size: 0.76rem; color: var(--text-muted); }
.rv-foot { display: flex; gap: 10px; }
.rv-foot .app-btn { flex: 1; }

.rv-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 700; color: var(--text-main); white-space: nowrap; }
.rv-badge .rv-star-one { color: #f5a524; }
.rv-badge.is-new { font-weight: 600; color: var(--text-muted); }

.rv-summary { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.rv-summary-main { display: flex; align-items: center; gap: 12px; }
.rv-summary-main p { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.rv-big { font-family: var(--font-titles); font-size: 2.2rem; font-weight: 800; color: var(--text-strong); line-height: 1; }
.rv-bars { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: 0.8rem; color: var(--text-muted); }
.rv-bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.rv-bar b { display: block; height: 100%; background: #f5a524; border-radius: 3px; }
.rv-new { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.rv-item { border-top: 1px solid var(--border); padding: 12px 0; }
.rv-item-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--text-muted); }
.rv-comment { margin: 6px 0 4px; font-size: 0.92rem; color: var(--text-strong); line-height: 1.45; }
.rv-who { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.rv-reply { margin: 8px 0 0 4px; padding-left: 10px; border-left: 2px solid var(--border); font-size: 0.85rem; color: var(--text-main); }
.rv-reply-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rv-mine { text-align: left; max-height: 65vh; overflow-y: auto; }
/* Étoiles Solar (sol-star-bold / -linear) */
.rv-star { color: var(--border); }
.rv-star.on { color: #f5a524; }
.rv-stars { display: inline-flex; gap: 1px; font-size: 1rem; }
.rv-stars.is-small { font-size: 0.85rem; }
.rv-badge .rv-star { font-size: 0.9rem; }
.rv-star-input button { display: inline-flex; color: inherit; }
.rv-star-input button .rv-star { font-size: 1.5rem; }
.rv-star-input.is-big button .rv-star, .rv-prompt-stars button .rv-star { font-size: 2.3rem; }
.rv-prompt-stars button:hover .rv-star { color: #f5a524; }

/* Carte de résultat : pastille + note sur une ligne qui peut passer à la
   ligne, le tarif reste à droite sans déborder de la carte. */
.cg-card-line:last-child { flex-wrap: wrap; row-gap: 6px; }
.cg-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.cg-card-tags .cg-flag, .cg-card-tags .rv-badge { white-space: nowrap; }
.cg-card-rate { white-space: nowrap; margin-left: auto; }

/* Carte de résultat : pastille « Match parfait » et note sous la photo, sur
   toute la largeur. Services sur une ligne, le surplus en « +N » (fitServiceChips). */
.cg-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; }
.cg-card-tags .cg-flag, .cg-card-tags .rv-badge { white-space: nowrap; }
.cg-card-services { flex-wrap: nowrap; overflow: hidden; }
.cg-card-services .cg-service-chip { flex-shrink: 0; white-space: nowrap; }
.cg-card-services .cg-service-chip[hidden] { display: none; }
.cg-service-more { flex-shrink: 0; }
.cg-card-cycle { white-space: nowrap; }

/* « Match parfait » en vert (couronne Solar crown-minimalistic). */
.cg-flag-match { background: var(--color-success-soft); color: var(--color-success); }

/* Fiche aidant : avis compacts (note sur une ligne, détail replié, carrousel). */
.rv-summary { gap: 6px; }
.rv-summary-main { flex-wrap: wrap; gap: 6px 8px; }
.rv-summary-main .rv-big { font-size: 1.6rem; }
.rv-summary-meta { font-size: 0.8rem; color: var(--text-muted); }
.rv-details summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; font-weight: 700; color: var(--text-main);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.rv-details summary::-webkit-details-marker { display: none; }
.rv-details[open] summary { margin-bottom: 8px; }
.rv-carousel { overflow: hidden; margin-top: 4px; }
.rv-track { display: flex; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
.rv-slide { flex: 0 0 100%; min-width: 0; }
.rv-slide .rv-item { border-top: 1px solid var(--border); }
.rv-nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 4px; }
.rv-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-main);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.rv-arrow:disabled { opacity: 0.35; cursor: default; }
.rv-pos { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .rv-track { transition: none; } }

/* ---------- Inscription aidant : un écran, une action (view-home) ---------- */
.cg-onb { max-width: 560px; margin: 0 auto 24px; display: flex; flex-direction: column; gap: 14px; }
.cg-onb-head .page-title { margin: 0; }
.cg-onb-sub { margin: 4px 0 0; font-size: 0.95rem; color: var(--text-muted); }
.cg-onb-progress { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.cg-onb-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.cg-onb-bar span { display: block; height: 100%; background: var(--color-accent); border-radius: 2px; transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); }

.cg-onb-done, .cg-onb-later {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
}
.cg-onb-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-success-soft); color: var(--color-success); font-size: 0.95rem;
}
.cg-onb-done-label { flex: 1; font-weight: 600; color: var(--text-strong); }
.cg-onb-done a { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

.cg-onb-next {
  padding: 18px; border-radius: var(--radius-md, 18px);
  background: var(--surface); border: 2px solid var(--color-accent, #FF8A80);
  box-shadow: var(--shadow-sm);
}
.cg-onb-eyebrow { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-ink, #B4235F); }
.cg-onb-next h3 { margin: 0 0 6px; font-family: var(--font-titles); font-size: 1.2rem; font-weight: 800; color: var(--text-strong); }
.cg-onb-next p { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.cg-onb-list { margin: 10px 0 0; padding-left: 20px; font-size: 0.9rem; color: var(--text-main); line-height: 1.7; }
.cg-onb-cta {
  margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border: none; border-radius: 14px; cursor: pointer;
  background: var(--color-accent, #FF8A80); color: #fff;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
}
.cg-onb-cta:active { transform: scale(0.98); }
.cg-onb-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); }
.cg-onb-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cg-onb-meta a { color: var(--text-muted); font-weight: 600; }

.cg-onb-later { color: var(--text-muted); font-size: 0.9rem; }
.cg-onb-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); font-size: 0.78rem; font-weight: 700;
}
.cg-onb-later span:nth-child(2) { flex: 1; font-weight: 600; }
.cg-onb-then { font-size: 0.78rem; }

.cg-onb-goal {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border); color: var(--text-muted);
}
.cg-onb-goal .icon { font-size: 1.4rem; flex-shrink: 0; }
.cg-onb-goal p { margin: 0; font-size: 0.88rem; line-height: 1.45; }
.cg-onb-goal strong { color: var(--text-strong); }
.cg-onb-next .cg-onb-tip { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); }  /* plus spécifique que « .cg-onb-next p » */

/* La carte « Comment se passe l'aide ? » (#review-prompt-slot) suit la liste « Suivi des demandes » : elle était collée à la dernière carte (8 px). */
.pending-list-container:not([style*="none"]) + #review-prompt-slot:not(:empty) { margin-top: var(--space-4); }

/* Ligne d'abonnement : la pastille d'état (« Renouvellement », « Terminé », « 2 jours »...) ne rogne plus le nom. La ligne du haut passe à la ligne :
   si nom + pastille ne tiennent pas côte à côte, la pastille descend sous le nom (et la ville) au lieu de lui laisser 2 mots coupés en deux. */
.sub-row-top { flex-wrap: wrap; row-gap: 6px; }
.sub-row-top .sub-row-name { flex: 1 1 auto; }
.sub-row-top .sub-days-left.is-renewing { margin-right: auto; }
/* Descendue sous le nom, la date (sans fond) s'aligne sur lui : le padding gauche du <style> hérité (5px 10px) ne la décale plus. */
.sub-row-top .sub-days-left:not(.is-renewing) { padding-left: 0; }

/* Cartes d'abonnement un peu plus hautes : nom sur sa ligne (2 lignes max),
   ville (aidant) ou prénom de l'aidant (famille) en dessous, sans « … »
   coupant l'information dès le premier mot. */
.sub-row { min-height: 88px; align-items: center; }
.sub-row-top { align-items: flex-start; }
.sub-row-name {
  white-space: normal;
  overflow: visible;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.sub-row-name .sub-row-cg {
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-days-left { padding-top: 2px; }
/* « Accompagne déjà … » : relation de confiance existante avec la famille. */
.cg-flag-helps { background: var(--color-success-soft); color: var(--color-success); }

/* « Mes avis » famille : une carte par aidant, portrait en tête et sur la réponse. */
.rv-fam-card { border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.rv-fam-card .rv-comment, .rv-fam-card .rv-who { margin: 0; }
.rv-fam-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 0.78rem; color: var(--text-muted); }
.rv-fam-reply { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft, rgba(0,0,0,0.03)); }
.rv-fam-reply-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.rv-fam-reply-who { margin: 0 0 2px; font-size: 0.78rem; font-weight: 700; color: var(--text-strong); }
.rv-fam-reply-who span { font-weight: 400; color: var(--text-muted); }
.rv-fam-reply-text { margin: 0; font-size: 0.85rem; color: var(--text-main); line-height: 1.45; }