/* =========================================================
   SUIVRE SON DOSSIER
   Une page qu'on ouvre inquiet : on vient savoir si sa demande
   avance. D'où une mise en page sans décor, où l'étape du jour
   se voit avant tout le reste, et où la suite est dessinée pour
   qu'on comprenne ce qui reste sans avoir à le demander.
   ========================================================= */

.vue--suivi { background: var(--bg); }

.sv-main { padding: 2.4rem 0 4.5rem; }
.sv-page { width: min(100% - 2.4rem, 720px); margin-inline: auto; }

.sv-tete h1 { margin: .2rem 0 .6rem; }
.sv-chapo { color: var(--texte-doux); max-width: 56ch; margin: 0 0 1.8rem; }

/* ---------- Le formulaire ---------- */
.sv-form {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem;
}
.sv-champ { margin-bottom: 1.1rem; }
.sv-champ label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.sv-champ input {
  width: 100%; padding: .72rem .85rem;
  font: inherit; font-size: 1.02rem;
  /* Un numéro de dossier et une clé se recopient caractère par
     caractère : une chasse fixe sépare le I du 1 et le O du 0, et
     l'écart entre les lettres aide à ne pas sauter de rang. */
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  border: 1px solid var(--trait); border-radius: 10px;
  background: #fff; color: var(--texte);
}
.sv-champ input::placeholder { color: #a9b4b0; letter-spacing: .06em; }
.sv-champ small {
  display: block; margin-top: .35rem;
  font-size: .8rem; line-height: 1.5; color: var(--texte-doux);
}
.sv-form .btn { width: 100%; justify-content: center; }

.sv-message:not(:empty) { margin-top: 1.2rem; }
.sv-avis {
  margin: 0; padding: .9rem 1.05rem; border-radius: 12px;
  font-size: .92rem; line-height: 1.6;
}
.sv-avis--non { background: #fdecea; border: 1px solid #e3a9a2; color: #6d1811; }
.sv-avis--ok { background: var(--c-vert-100); border: 1px solid #9cbcae; }

.sv-aide {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--trait);
}
.sv-aide h2 { font-size: var(--fs-md); margin: 0 0 .5rem; }
.sv-aide p { color: var(--texte-doux); font-size: .92rem; margin: 0 0 .7rem; }

/* ---------- Le dossier ---------- */
.sv-dossier {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 16px; padding: 1.5rem 1.5rem 1.6rem;
}
.sv-dossier:focus { outline: none; }
.sv-dossier__haut {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.sv-num {
  display: block; font-size: 1.3rem; letter-spacing: .04em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sv-etat {
  padding: .4rem .9rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--c-vert-100); color: #20402f;
}
.sv-etat--piece { background: var(--c-orange-100); color: #6b4e00; }
.sv-etat--refus { background: #fdecea; color: #8e1f17; }
.sv-etat--traite, .sv-etat--clos { background: #e9ece9; color: #37433f; }

.sv-faits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .9rem 1.4rem; margin: 0 0 1.6rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--trait);
}
.sv-faits dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); margin-bottom: .15rem;
}
.sv-faits dd { margin: 0; font-weight: 600; }

/* ---------- La frise ---------- */
.sv-frise { list-style: none; margin: 0; padding: 0; }
.sv-pas {
  position: relative; display: flex; gap: 1rem;
  padding: 0 0 1.5rem 0;
}
/* Le trait qui relie les étapes. Il s'arrête à la dernière : une
   ligne qui continue dans le vide ferait croire à une suite. */
.sv-pas::before {
  content: ""; position: absolute; left: 10px; top: 1.45rem; bottom: -.2rem;
  width: 2px; background: var(--trait);
}
.sv-pas:last-child::before { display: none; }
.sv-pas__point {
  flex: none; width: 22px; height: 22px; margin-top: .22rem;
  border-radius: 50%; background: #fff;
  border: 3px solid var(--trait); z-index: 1;
}
.sv-pas--fait .sv-pas__point { border-color: var(--c-vert); background: var(--c-vert); }
.sv-pas--fait::before { background: var(--c-vert); }
/* L'étape du jour : c'est elle qu'on vient lire, elle se voit la
   première. Un halo plutôt qu'une couleur de plus — le reste de la
   page est déjà en vert. */
.sv-pas--ici .sv-pas__point {
  box-shadow: 0 0 0 5px rgba(63, 108, 91, .18);
}
.sv-pas--avenir .sv-pas__corps b { color: var(--texte-doux); font-weight: 600; }
.sv-pas__corps { flex: 1; min-width: 0; }
.sv-pas__corps b { display: block; font-size: 1.02rem; }
.sv-pas__quand {
  display: block; font-size: .82rem; color: var(--texte-doux); margin-top: .1rem;
}
.sv-pas__quoi { margin: .5rem 0 0; font-size: .92rem; line-height: 1.6; }
/* Le mot d'un agent. Il est écrit pour l'usager, souvent pour lui
   demander quelque chose : il doit se détacher du reste. */
.sv-pas__note {
  margin: .6rem 0 0; padding: .7rem .9rem;
  background: var(--c-vert-50); border-left: 3px solid var(--c-vert);
  border-radius: 0 10px 10px 0;
  font-size: .92rem; line-height: 1.6;
}

.sv-fin {
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--trait);
  font-size: .92rem; line-height: 1.65; color: var(--texte-doux);
}
.sv-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.3rem; }

@media (max-width: 560px) {
  .sv-main { padding: 1.6rem 0 3rem; }
  .sv-form, .sv-dossier { padding: 1.1rem; border-radius: 14px; }
  .sv-champ input { font-size: 1rem; padding: .66rem .7rem; }
  .sv-num { font-size: 1.12rem; }
  .sv-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* À l'impression, l'usager garde une preuve de ce qu'il a vu et
   quand : c'est ce qu'il montrera au guichet s'il y a désaccord. */
@media print {
  .sv-actions, .sv-aide, .fx-barre { display: none !important; }
  .sv-dossier { border: 0; padding: 0; }
}