/**
 * Suivis de dossiers (lot 12A).
 *
 * Prolonge portail.css et reprend ses jetons : blanc dominant, anthracite, violet
 * pour les liens et les actions, menthe en petite touche seulement, traits fins,
 * aucune ombre ni bordure verticale épaisse. Aucune couleur propre, aucune refonte :
 * la zone de suivi doit se lire comme le reste du dossier, pas comme une alerte.
 *
 * Une nouveauté se signale par un tag compact et un mot, jamais par une couleur
 * seule : le libellé reste lisible sans distinguer les teintes.
 */

/* ---------- Zone « Suivre ce dossier » (dossier et pack de sources) ---------- */

.suivi {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
}
.suivi__action { flex: none; }
.suivi__acces { font-size: var(--t-15); }
.suivi__etat {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--t-15);
  color: var(--texte-doux);
}
.suivi__etat:empty { display: none; }
/* D15 : cette portée est une phrase de vingt-quatre mots — ce que le suivi
   garde, et où. Elle se lit, donc elle prend la taille du corps d'interface. */
.suivi__portee {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--t-15);
  color: var(--texte-tenu);
}
.suivi__action[hidden], .suivi__portee[hidden] { display: none; }

/* ---------- Page « Mes suivis » ---------- */

.suivis { padding-block: var(--e-2) var(--e-12); }
.suivis > * { max-width: 820px; }
.suivis__entete { padding-block: var(--e-3) var(--e-2); }

.suivis__sans-js,
.suivis__avertissement {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--teinte);
  font-size: var(--t-15);
  color: var(--texte-doux);
}
.suivis__avertissement .bouton { margin-top: var(--e-2); }
.suivis__sans-js[hidden], .suivis__app[hidden] { display: none; }

.suivis__annonce { margin-top: var(--e-3); font-size: var(--t-15); color: var(--texte-doux); }
.suivis__annonce:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.suivis__liste { margin: var(--e-2) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }

.suivi-fiche { margin-top: var(--e-6); padding-top: var(--e-6); border-top: 1px solid var(--trait); }
/* D14 : ce clamp ne clampait rien — ses deux bornes étaient le même jeton, donc
   21 px à toutes les largeurs. Il est écrit tel quel, sans palier : la taille
   n'a pas changé, seule la façon de l'écrire. */
.suivi-fiche__titre { margin-top: var(--e-2); font-size: var(--t-21); letter-spacing: -0.01em; }
.suivi-fiche__etat { margin-top: var(--e-2); font-size: var(--t-17); line-height: 1.5; }
.suivi-fiche__reperes { margin-top: var(--e-1); font-size: var(--t-13); color: var(--texte-tenu); }

/* Tag d'état : compact et neutre, lisible sans la couleur (le mot porte l'information). */
.suivi-statut {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-12);
  line-height: 1;
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--trait-forte);
  border-radius: var(--r-pilule);
  color: var(--texte);
  background: var(--fond);
  white-space: nowrap;
}
.suivi-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--texte); flex: none; }
.suivi-statut--nouveau { color: var(--action); border-color: var(--action); }
.suivi-statut--nouveau::before { background: var(--action); }
.suivi-statut--a-jour::before { background: var(--menthe); }

.suivi-fiche__notices { margin-top: var(--e-4); }
.suivi-fiche__liste { margin: var(--e-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.suivi-fiche__version { margin: 0; font-size: var(--t-13); color: var(--texte-tenu); }
.suivi-fiche__textes { margin: var(--e-1) 0 0; padding-left: var(--e-4); display: grid; gap: var(--e-2); font-size: var(--t-15); line-height: 1.55; }
.suivi-fiche__textes li::marker { color: var(--marque); }

.suivi-fiche__acces { margin: var(--e-3) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-15); }
.suivi-fiche__acces a { display: inline-flex; min-height: 32px; align-items: center; }

.suivi-fiche__actions { margin-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-2); }

.suivis__portee { margin-top: var(--e-12); padding-top: var(--e-6); border-top: 1px solid var(--trait); }
.suivis__portee p { margin-top: var(--e-2); font-size: var(--t-15); color: var(--texte-doux); }

@media (max-width: 520px) {
  .suivi { gap: var(--e-2); }
  .suivi__action, .suivi-fiche__actions .bouton { width: 100%; }
  .suivi-fiche__textes { padding-left: var(--e-4); overflow-wrap: anywhere; }
}

/* L'échéance de revue dans « Mes suivis » : une information, pas une alerte. */
.suivi-fiche__revue { margin: 0.4rem 0 0; font-size: var(--t-15); color: #4a4a48; }

/*
 * P17 / BH — la nature de la ressource suivie.
 *
 * Un dossier et une dépêche se lisent différemment, et la liste des suivis le dit
 * plutôt que de le laisser deviner au titre.
 */
.suivi-fiche__nature {
  margin: 0 0 var(--e-1);
  font-size: var(--t-12);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}