/* ════════════════════════════════════════════════════════════════════════════
   Module « relances »

   Une ligne doit dire trois choses avant qu'on ait lu : où on en est, quand
   part la suite, et ce qui bloque. Le blocage est donc la seule chose qui
   casse la grille — un bandeau ambre en travers de la ligne, impossible à
   survoler sans le voir.

   Les jetons sont ceux des autres modules : navy, corail, ambre pour ce qui
   attend, vert pour ce qui est réglé. Rien de neuf, parce qu'un client qui
   passe d'un module à l'autre ne doit pas réapprendre à lire.
   ════════════════════════════════════════════════════════════════════════════ */
.rl {
  --rl-vert:#1D6F52; --rl-vert-fond:#E6F1EC;
  --rl-ambre:#96601A; --rl-ambre-fond:#FBF0DF;
  --rl-rouge:#B03A2E; --rl-rouge-fond:rgba(176,58,46,.08);
  --rl-bordure:var(--kanso-bordure,#ECE4DA);
  --rl-surface:#fff; --rl-encre:var(--kanso-encre,#3a3550);
  --rl-douce:var(--kanso-encre-douce,#6b6780);
  --rl-navy:var(--kanso-navy,#140E59);
  --rl-corail:var(--kanso-corail,#EF7D53);
  color:var(--rl-encre); font-size:14px; line-height:1.55;
}
.rl-entete h2 { font-family:Lato,sans-serif; font-size:26px; font-weight:900;
  letter-spacing:-.4px; color:var(--rl-navy); margin:0 0 4px; }
.rl-sous { margin:0; color:var(--rl-douce); max-width:66ch; }

/* Quatre chiffres. Le premier décide d'agir, le dernier prouve que ça marche. */
.rl-bandeau { display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rl-bordure); border:1px solid var(--rl-bordure);
  border-radius:3px; overflow:hidden; margin:22px 0 18px; }
.rl-tuile { background:var(--rl-surface); padding:15px 18px; display:flex;
  flex-direction:column; gap:2px; border:0; font:inherit; text-align:left;
  cursor:pointer; }
.rl-tuile:hover { background:var(--kanso-input,#F5F6FA); }
.rl-tuile-titre { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--rl-douce); }
.rl-tuile-montant { font-family:Lato,sans-serif; font-weight:900; font-size:23px;
  color:var(--rl-navy); font-variant-numeric:tabular-nums; }
.rl-tuile-sous { font-size:12px; color:var(--rl-douce); }
.rl-tuile--echange .rl-tuile-montant { color:var(--rl-corail); }
.rl-tuile--decider .rl-tuile-montant { color:var(--rl-ambre); }
.rl-tuile--encaisse .rl-tuile-montant { color:var(--rl-vert); }

.rl-onglets { display:flex; gap:6px; margin-bottom:14px; }
.rl-onglet { font:inherit; font-size:13.5px; padding:7px 15px; cursor:pointer;
  border:1px solid var(--rl-bordure); background:var(--rl-surface);
  color:var(--rl-douce); border-radius:999px; }
.rl-onglet--vif { background:var(--rl-navy); border-color:var(--rl-navy); color:#fff; }

.rl-barre { display:flex; flex-direction:column; align-items:stretch; gap:8px;
  margin-bottom:10px; }
.rl-recherche { flex:1; min-width:0; padding:9px 12px; font:inherit; font-size:13.5px;
  border:1px solid var(--rl-bordure); border-radius:9px;
  background:var(--kanso-input,#FAF8F5); color:inherit; }
.rl-recherche:focus { outline:none; border-color:var(--rl-corail); }
.rl-compte { font-size:12.5px; color:var(--rl-douce); white-space:nowrap; }

/* Deux colonnes : la liste choisit, le panneau montre. Sur un portefeuille de
   cent dossiers, empiler les fiches obligeait à faire défiler pour comparer. */
.rl-deux { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:16px;
  align-items:start; }
.rl-gauche { min-width:0; }
.rl-droite { min-width:0; position:sticky; top:16px; }

.rl-breves { list-style:none; margin:0; padding:0; border:1px solid var(--rl-bordure);
  border-radius:11px; overflow:hidden; background:var(--rl-surface);
  max-height:60vh; overflow-y:auto; }
.rl-breves li + li { border-top:1px solid var(--rl-bordure); }
.rl-breve { width:100%; font:inherit; text-align:left; cursor:pointer;
  background:transparent; border:0; padding:11px 13px; display:flex;
  align-items:center; gap:10px; color:inherit; }
.rl-breve:hover { background:var(--kanso-input,#F5F6FA); }
.rl-breve--active { background:var(--rl-vert-fond); }
/* Un dossier bloqué se repère dans la liste, pas seulement dans le détail. */
.rl-breve--bloquee { box-shadow:inset 3px 0 0 var(--rl-ambre); }
.rl-pastille { width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--rl-douce); }
.rl-pastille--relance_programmee { background:var(--rl-vert); }
.rl-pastille--en_echange { background:var(--rl-corail); }
.rl-pastille--a_decider { background:var(--rl-ambre); }
.rl-pastille--gagne { background:var(--rl-vert); opacity:.45; }
.rl-breve-qui { display:flex; flex-direction:column; min-width:0; flex:1; }
.rl-breve-client { font-weight:600; font-size:13.5px; color:var(--rl-navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-breve-ref { font-size:11.5px; color:var(--rl-douce);
  font-variant-numeric:tabular-nums; }
.rl-breve-droite { display:flex; flex-direction:column; align-items:flex-end;
  white-space:nowrap; }
.rl-breve-montant { font-weight:700; font-size:13px; color:var(--rl-navy);
  font-variant-numeric:tabular-nums; }
.rl-breve-quand { font-size:11.5px; color:var(--rl-douce); }
.rl-retard { color:var(--rl-rouge); font-weight:600; }

.rl-detail { background:var(--rl-surface); border:1px solid var(--rl-bordure);
  border-radius:11px; padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.rl-detail-tete { display:flex; justify-content:space-between; gap:16px;
  align-items:flex-start; }
.rl-detail-tete h3 { font-family:Lato,sans-serif; font-size:19px; font-weight:900;
  margin:0 0 2px; color:var(--rl-navy); }
.rl-detail-ref { font-size:12.5px; color:var(--rl-douce); }
.rl-detail-montant { text-align:right; font-family:Lato,sans-serif; font-weight:900;
  font-size:22px; color:var(--rl-navy); font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; white-space:nowrap; }
.rl-echeance { font-family:inherit; font-weight:400; font-size:12px;
  color:var(--rl-douce); }
.rl-detail-etat { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-size:12.5px; color:var(--rl-douce); }
.rl-detail-suite { font-size:13px; }

.rl-filbloc { border-top:1px solid var(--rl-bordure); padding-top:12px; }

/* Le tableau des clients. Des chiffres alignés, pas un classement. */
.rl-tableau { background:var(--rl-surface); border:1px solid var(--rl-bordure);
  border-radius:11px; padding:6px 0 0; overflow-x:auto; }
.rl-tableau table { width:100%; border-collapse:collapse; font-size:13px; }
.rl-tableau th { text-align:left; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--rl-douce); font-weight:600;
  padding:10px 14px; border-bottom:1px solid var(--rl-bordure); white-space:nowrap; }
.rl-tableau td { padding:10px 14px; border-bottom:1px solid var(--rl-bordure); }
.rl-tableau tr:last-child td { border-bottom:0; }
.rl-t-client { font-weight:600; color:var(--rl-navy); }
.rl-t-n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rl-t-n.rl-bon { color:var(--rl-vert); font-weight:600; }
.rl-t-n.rl-tendu { color:var(--rl-ambre); font-weight:600; }
.rl-tableau-note { font-size:12px; color:var(--rl-douce); margin:0;
  padding:10px 14px 14px; line-height:1.5; }

.rl-onglets-sep { flex:1; }
.rl-filtres { display:flex; gap:4px; }
.rl-puce { font:inherit; font-size:12px; padding:5px 11px; cursor:pointer;
  border:1px solid var(--rl-bordure); background:var(--rl-surface);
  color:var(--rl-douce); border-radius:999px; white-space:nowrap; }
.rl-puce--vif { background:var(--rl-navy); border-color:var(--rl-navy); color:#fff; }
.rl-tri { font-size:12px; color:var(--rl-douce); display:flex; align-items:center;
  gap:5px; white-space:nowrap; }
.rl-tri select { font:inherit; font-size:12px; padding:4px 6px; border-radius:7px;
  border:1px solid var(--rl-bordure); background:var(--rl-surface); color:inherit; }

/* Le fil */
.rl-fil { position:fixed; inset:0; background:rgba(20,14,89,.34);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:60; }
.rl-fil-boite { background:var(--rl-surface); border-radius:13px; padding:20px;
  max-width:680px; width:100%; max-height:80vh; overflow:auto; }
.rl-fil-boite header { display:flex; justify-content:space-between;
  align-items:center; gap:14px; margin-bottom:12px; }
.rl-synthese { background:var(--kanso-input,#FAF8F5); border-radius:9px;
  padding:11px 13px; font-size:13px; margin:0 0 14px; }
.rl-messages { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:10px; }
.rl-msg { border-left:3px solid var(--rl-bordure); padding:2px 0 2px 11px;
  display:flex; flex-direction:column; gap:2px; }
.rl-msg--entrant { border-left-color:var(--rl-corail); }
.rl-msg-qui { font-size:11.5px; color:var(--rl-douce); }
.rl-msg-objet { font-weight:600; font-size:13px; }
.rl-msg-corps { font-size:13px; white-space:pre-wrap; }

/* ── Ce que mon remplacement du 15/09 avait emporté ────────────────────────
   Onze jeux de règles supprimés d'un coup parce que la zone remplacée mordait
   plus large que prévu. Le symptôme : le bloc du verrou sans fond ambre et ses
   deux textes collés — visible seulement en regardant l'écran, pas le code. */

.rl-etape { font-size:11.5px; padding:3px 9px; border-radius:999px;
  background:var(--kanso-input,#F5F6FA); color:var(--rl-douce); white-space:nowrap; }
.rl-etape--relance_programmee { background:var(--rl-vert-fond); color:var(--rl-vert); }
.rl-etape--en_echange { background:rgba(239,125,83,.14); color:#A24A24; }
.rl-etape--a_decider { background:var(--rl-ambre-fond); color:var(--rl-ambre); }
.rl-etape--gagne { background:var(--rl-vert-fond); color:var(--rl-vert); }
.rl-mode { color:var(--rl-navy); }
.rl-envois { color:var(--rl-douce); }
.rl-suite--retard { color:var(--rl-rouge); font-weight:600; }
.rl-suite--pause { color:var(--rl-corail); }
.rl-relatif { color:var(--rl-douce); }

/* Le verrou : la seule chose de l'écran qui casse la grille, parce que c'est
   la seule qui empêche d'avancer. */
.rl-verrou { background:var(--rl-ambre-fond); border-radius:9px; padding:11px 13px;
  display:flex; flex-direction:column; gap:5px; }
.rl-verrou-titre { font-weight:700; font-size:13px; color:var(--rl-ambre); }
.rl-verrou-liste { font-size:12.5px; color:#7A4E15; }
.rl-bouton--verrou { align-self:flex-start; margin-top:3px;
  border-color:rgba(150,96,26,.4); color:var(--rl-ambre); background:transparent; }
.rl-bouton--verrou:hover { background:var(--rl-ambre); color:#fff; }

.rl-actions { display:flex; flex-wrap:wrap; gap:8px; }
.rl-bouton { font:inherit; font-size:13px; padding:7px 13px; cursor:pointer;
  border:1px solid var(--rl-bordure); background:var(--rl-surface);
  color:var(--rl-encre); border-radius:9px; }
.rl-bouton:hover { border-color:var(--rl-navy); }
.rl-bouton--vif { background:var(--rl-navy); border-color:var(--rl-navy); color:#fff; }

.rl-vide { padding:26px; text-align:center; color:var(--rl-douce);
  background:var(--rl-surface); border:1px solid var(--rl-bordure);
  border-radius:11px; }
.rl-dit { font-size:12.5px; line-height:1.5; margin:0 0 12px; padding:9px 11px;
  border-radius:9px; border-left:3px solid transparent; }
.rl-dit--refus { background:var(--rl-rouge-fond); border-left-color:var(--rl-rouge);
  color:#8A2D24; }
.rl-dit--fait { background:var(--rl-vert-fond); border-left-color:var(--rl-vert);
  color:#155C41; }

@media (max-width:980px) {
  .rl-deux { grid-template-columns:1fr; }
  .rl-droite { position:static; }
  .rl-breves { max-height:none; }
}
@media (max-width:880px) {
  .rl-bandeau { grid-template-columns:repeat(2,1fr); }
  .rl-suite { margin-left:0; width:100%; }
  .rl-ligne-haut { flex-direction:column; }
  .rl-montant { text-align:left; }
}

/* Le compteur de l'année : un seul chiffre, en grand, et sa borne juste en
   dessous. La borne n'est pas une précaution de style — sans elle le total est
   lu comme le chiffre d'affaires, et il ne l'est pas. */
.rl-annee { background:var(--rl-navy); color:#fff; border-radius:11px;
  padding:16px 20px; margin:22px 0 12px; display:flex; flex-direction:column; gap:2px; }
.rl-annee-titre { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  opacity:.72; }
.rl-annee-montant { font-family:Lato,sans-serif; font-weight:900; font-size:32px;
  letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.rl-annee-sous { font-size:12px; opacity:.72; }
.rl-bandeau { margin-top:0; }

/* La règle de base manquait : seuls ses modificateurs avaient été restaurés. */
.rl-suite { font-size:13px; }