/**
 * LISA Lab — le bandeau des remontées de l'espace client.
 *
 * Feuille à part, et non un ajout à `css/main.css` : celui-ci porte des
 * caractères que son encodage rend fragiles, et le réécrire en bloc pour
 * trente règles aurait abîmé le reste. Les classes sont toutes préfixées
 * `rp-`, de sorte qu'aucune ne puisse entrer en conflit avec une classe
 * existante.
 *
 * Le bandeau emprunte l'allure de `.alertes-bar--info`, qu'il complète : même
 * bordure, même fond pâle, parce que c'est la même famille d'information — un
 * fait arrivé qui attend un geste.
 */

#remontees-portail-bar {
  display: block;           /* les autres bandeaux sont en ligne ; celui-ci empile */
  padding: 0;
  overflow: hidden;
}

.rp-entete {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  font-size: 13px;
}

.rp-ligne {
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
}
.rp-ligne:last-child { border-bottom: 0; }

/* Ce que personne n'a encore vu. Un liseré, et non une couleur de fond :
   le bandeau en compte parfois dix, et dix fonds colorés ne se lisent plus. */
.rp-ligne--neuve { border-left: 3px solid #b45309; }

.rp-ligne-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
}

.rp-type {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #334155;
}

.rp-client { flex: 0 0 auto; font-size: 13px; color: #0f172a; }
.rp-resume { flex: 1 1 260px; font-size: 13px; line-height: 1.4; }
.rp-classement { font-size: 12px; color: #64748b; }
.rp-quand { flex: 0 0 auto; font-size: 12px; color: #64748b; }

.rp-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.rp-vue { font-size: 12px; color: #16a34a; }

/* ── Le détail déplié : ce que l'acceptation va faire ───────────────────── */

.rp-detail {
  padding: 4px 14px 14px 14px;
  background: #f8fafc;
  border-top: 1px dashed rgba(0, 0, 0, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
}

.rp-detail > p { flex: 1 1 100%; margin: 6px 0 0 0; font-size: 13px; line-height: 1.5; }

/* La phrase qui dit l'effet. Elle doit se lire avant le bouton, et donc se
   distinguer du reste sans crier. */
.rp-effet {
  padding: 8px 10px;
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  border-radius: 3px;
}

.rp-dit { color: #334155; }
.rp-mot { font-style: italic; color: #334155; }

/* Ce qui bloquerait, ou ce qui mérite d'y regarder à deux fois. */
.rp-avertit {
  padding: 8px 10px;
  background: #fef3c7;
  border-left: 3px solid #b45309;
  border-radius: 3px;
}
.rp-avertit label { margin-left: 8px; font-weight: 600; }

.rp-champ {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #475569;
  flex: 0 1 220px;
}
.rp-champ--large { flex: 1 1 320px; }
/* Le `select` prend la même peau que l'`input` : le type d'installation est
   passé en liste fermée avec l'arbitrage du 19/10, et un champ déroulant nu au
   milieu de champs bordés se serait lu comme un élément d'un autre écran. */
.rp-champ input,
.rp-champ select {
  padding: 5px 7px;
  border: 1px solid var(--color-border-champ, #7c90a9);
  border-radius: 3px;
  font-size: 13px;
}

.rp-choix {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
}
.rp-choix > span { font-weight: 600; color: #475569; }
.rp-choix label { display: inline-flex; align-items: center; gap: 5px; }

.rp-boutons { flex: 1 1 100%; display: flex; gap: 8px; margin-top: 6px; }

/* Le corps d'un message, tel que le client l'a écrit : on ne reformate pas
   la prose d'un tiers, on la montre. */
.rp-corps { padding: 0 14px 12px 14px; }
.rp-corps pre {
  margin: 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  font: inherit;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 760px) {
  .rp-actions { margin-left: 0; width: 100%; }
  .rp-quand { width: 100%; }
}