/* =====================================================================
   VISION PME — Les annoncés sans spécimen

   Une liste de travail, pas un tableau de bord. Chaque carte doit
   répondre à trois questions dans cet ordre : à quelle étape la personne
   s'est arrêtée, depuis combien de temps, et quoi lui dire. Le reste est
   accessoire.

   L'étape porte la couleur et l'icône ; le « quoi dire » est écrit en
   toutes lettres sous les coordonnées. Un écran de relance qui affiche un
   statut sans dire quoi en faire laisse l'agent improviser la même phrase
   pour quatre situations différentes.
   ===================================================================== */

/* ⚠️ Même piège qu'ailleurs : `#page-content` est une grille CSS, et un
   enfant de grille a `min-width: auto`. */
#rl-zone { min-width: 0; }

.rl-resume { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }

.rl-puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--rl-c, var(--border));
  color: var(--rl-c, var(--text-muted));
  background: var(--surface-1);
  font: 500 var(--fs-xs)/1.6 var(--font-body);
  font-variant-numeric: tabular-nums;
}
.rl-puce b { font-weight: 750; }
.rl-puce .icon { width: 13px; height: 13px; }
/* Une étape à zéro reste visible — l'absence est une information — mais
   elle cesse de réclamer l'attention. */
.rl-puce.est-vide { opacity: .4; border-color: var(--border); color: var(--text-subtle); }

.rl-liste { display: grid; gap: var(--s-3); }

.rl-carte {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  align-items: start; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-md, 10px);
}
/* Une semaine sans nouvelles : le oui refroidit, et la bordure le dit. */
.rl-carte.est-vieux { border-left-color: var(--warn); }

.rl-etape {
  display: flex; align-items: center; gap: 7px;
  color: var(--rl-c, var(--text-muted));
  font: 700 var(--fs-xs)/1.35 var(--font-body);
}
.rl-etape .icon { width: 15px; height: 15px; flex: none; }

.rl-qui { min-width: 0; }

.rl-nom {
  display: block; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: var(--text);
  font: 700 var(--fs-base)/1.3 var(--font-body);
  overflow-wrap: anywhere;
}
.rl-nom:hover { text-decoration: underline; }

.rl-meta {
  display: flex; flex-wrap: wrap; gap: 2px var(--s-4);
  margin-top: 3px;
  font: 400 var(--fs-xs)/1.5 var(--font-body);
  color: var(--text-subtle);
}
.rl-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.rl-meta .icon { width: 13px; height: 13px; flex: none; }
.rl-meta .est-vieux { color: var(--warn); font-weight: 600; }
.rl-meta .est-alerte { color: var(--danger); font-weight: 600; }

/* La phrase à dire. C'est le cœur de la carte, pas une note de bas de
   page : elle a le contraste du texte courant, pas celui d'un sous-titre. */
.rl-dire {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-left: 2px solid var(--border);
  font: 400 var(--fs-sm)/1.5 var(--font-body);
  color: var(--text-muted);
}

.rl-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  justify-content: flex-end;
}
.rl-espace { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  /* L'étape passe au-dessus du nom : à cette largeur, onze rem de libellé
     ne laissent plus rien aux coordonnées. */
  .rl-carte { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .rl-actions { justify-content: flex-start; }
}

/* ── Les puces d'étape sont devenues des filtres (9 septembre 2026) ───
   Elles comptaient déjà ; leur donner le clic évite une deuxième liste
   déroulante pour la même information. Un bouton doit donc se comporter
   comme un bouton — curseur, survol, état choisi — sans cesser d'être
   la puce qu'on lisait avant. */
.rl-puce-btn {
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.rl-puce-btn:hover { background: var(--surface-2, var(--surface-1)); }
.rl-puce-btn.est-choisi {
  background: var(--rl-c, var(--green, #00CE86));
  border-color: var(--rl-c, var(--green, #00CE86));
  color: #08110D;
}
/* Une étape vide reste cliquable — on peut vouloir vérifier qu'elle
   l'est vraiment — mais elle cesse de réclamer l'attention. */
.rl-puce-btn.est-vide.est-choisi { opacity: 1; }
.rl-puce-btn:focus-visible {
  outline: 2px solid var(--green, #00CE86); outline-offset: 2px;
}

.rl-compte {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ `.input` EST EN `width:100%` — un `<select>` qui porte cette classe
   occupe donc toute la barre d'actions et repousse le bouton à la ligne
   suivante. Vu au rendu : le champ, la liste et « Actualiser » étaient
   empilés l'un sous l'autre sur un écran de 1440 px. */
#rl-tri { width: auto; min-width: 12rem; flex: 0 0 auto; }