/* ---------------------------------------------------------------------------
   Le suivi de formation, présenté en étapes numérotées.
   ---------------------------------------------------------------------------
   Le prototype empilait sept titres de même niveau : on ne voyait ni l'ordre,
   ni ce qui restait à faire. Chaque étape devient une carte numérotée, avec sa
   propre jauge, et une jauge d'ensemble ferme la liste.

   Feuille séparée : css/app.css reste la copie exacte du prototype.

   Contrainte de largeur : cet écran vit dans la colonne étroite de la fiche,
   environ 440 px, et moins sur un petit portable. La mise en page ne s'appuie
   donc sur AUCUNE largeur de fenêtre — le titre et la jauge sont sur deux
   lignes distinctes à toutes les tailles. Une première version utilisait une
   requête média : elle ne se déclenchait jamais, puisque c'est le conteneur
   qui est étroit, pas la fenêtre.
--------------------------------------------------------------------------- */

.etape {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--card);
}

/* Une étape terminée s'efface : l'œil va à ce qui reste à faire. */
.etape-faite { background: var(--bg); }
.etape-sansobjet { opacity: .68; }

.etape-entete {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.etape-numero {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--txt-sm);
  font-weight: 700;
  color: #fff;
  background: var(--text-soft);
}
.etape-faite .etape-numero { background: #2E9E5B; }
.etape-encours .etape-numero { background: var(--coral); }
.etape-sansobjet .etape-numero { background: var(--border); color: var(--text-soft); }

/* app.css met tout h3 de .panel en inline-flex, avec une barre décorative
   sous le titre. Sur sept cartes d'affilée, cela ferait sept barres et un
   titre qui ne sait pas revenir à la ligne. On neutralise les deux ici. */
.panel h3.etape-titre,
.panel h3.recapitulatif-titre {
  display: block;
  padding-bottom: 0;
  margin: 0;
  font-size: var(--txt-lg);
  font-weight: 700;
  line-height: 1.3;
}
.panel h3.etape-titre::after,
.panel h3.recapitulatif-titre::after { content: none; }

.etape-titre { flex: 1 1 auto; min-width: 0; }
.etape-rang {
  display: block;
  font-size: var(--txt-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 1px;
}

/* La jauge occupe sa propre ligne : elle reste lisible quelle que soit la
   largeur, et la barre s'étire au lieu d'être écrasée. */
.jauge {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jauge-piste {
  flex: 1 1 auto;
  min-width: 0;
  height: 7px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.jauge-remplissage {
  height: 100%;
  border-radius: 99px;
  background: var(--coral);
  transition: width .25s ease;
}
.jauge-faite .jauge-remplissage { background: #2E9E5B; }
.jauge-sansobjet .jauge-remplissage { background: var(--text-soft); opacity: .4; }
.jauge-attente .jauge-remplissage { background: var(--text-soft); }

.jauge-valeur {
  flex: 0 0 auto;
  font-size: var(--txt-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
  color: var(--text-soft);
}
.jauge-faite .jauge-valeur { color: #2E9E5B; }
.jauge-encours .jauge-valeur { color: var(--coral); }

.etape-etat {
  font-size: var(--txt-xs);
  line-height: 1.45;
  color: var(--text-soft);
  margin: 9px 0 0;
}
.etape-etat b { color: var(--text); font-weight: 700; }

.etape-corps { margin-top: 10px; }
.etape-corps .list-row:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------------
   La jauge d'ensemble, sous la liste
--------------------------------------------------------------------------- */
.recapitulatif {
  border: 1px solid var(--border);
  border-left: 3px solid var(--coral);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg);
}
.recapitulatif-complet { border-left-color: #2E9E5B; }

.recapitulatif-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.recapitulatif-pourcent {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--coral);
}
.recapitulatif-complet .recapitulatif-pourcent { color: #2E9E5B; }
.recapitulatif .jauge-piste { height: 10px; }

.recapitulatif-detail {
  font-size: var(--txt-xs);
  line-height: 1.45;
  color: var(--text-soft);
  margin-top: 10px;
}
.recapitulatif-reste {
  margin-top: 8px;
  font-size: var(--txt-sm);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Le contenu d'une étape, dans une colonne étroite
   ---------------------------------------------------------------------------
   .list-row du prototype est un flex sans retour à la ligne : dans une colonne
   de 220 px, le bouton « Marquer comme envoyée » ne pouvait pas rétrécir et
   débordait par-dessus le texte. On autorise le retour à la ligne, ici
   seulement — les autres écrans, plus larges, gardent le comportement
   d'origine.
--------------------------------------------------------------------------- */
.etape-corps .list-row {
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 2px;
}
.etape-corps .list-row .meta { flex: 1 1 130px; }
.etape-corps .list-row .btn {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
.etape-corps .field { margin-bottom: 10px; }
.etape-corps .field label { font-size: var(--txt-sm); }

/* ---------------------------------------------------------------------------
   L'état d'une ligne : fait, ou à faire
   ---------------------------------------------------------------------------
   Le prototype ne distinguait les deux que par le libellé d'un bouton —
   « Marquer comme envoyé » d'un côté, « Annuler » de l'autre, tous deux gris
   une fois faits. En parcourant la liste, rien ne disait ce qui restait à
   faire, ce qui est pourtant la première chose que cet écran doit dire.

   La couleur ne porte jamais l'information seule : la pastille cochée, le
   libellé et le fond changent ensemble. Un écran en niveaux de gris, ou une
   personne qui distingue mal le vert, lit la même chose. */

.ligne-etat {
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 3px solid transparent;
  padding-left: 13px;
  transition: background-color .15s ease, border-color .15s ease;
}

.ligne-etat.ligne-faite {
  border-left-color: #2E9E5B;
  background: rgba(46, 158, 91, .07);
}

.etat-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 11px 4px 7px;
  border-radius: 999px;
  font-size: var(--txt-sm);
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}

.etat-marque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: var(--txt-xs);
  line-height: 1;
}

.etat-pastille.etat-fait {
  background: rgba(46, 158, 91, .14);
  color: #1F7A44;
}
.etat-pastille.etat-fait .etat-marque {
  background: #2E9E5B;
  color: #fff;
}

.etat-pastille.etat-afaire {
  background: var(--bg);
  color: var(--text-soft);
}
.etat-pastille.etat-afaire .etat-marque {
  border: 1.5px solid var(--border);
}

/* Le bouton passe en retrait : l'état se lit sur la pastille, pas sur lui. */
.etat-bouton {
  padding: 5px 12px;
  font-size: var(--txt-sm);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ligne-etat { transition: none; }
}

body[data-theme="dark"] .ligne-etat.ligne-faite { background: rgba(46, 158, 91, .12); }
body[data-theme="dark"] .etat-pastille.etat-fait { color: #6FD39B; }