/*
 * Preuves, temps gagné, certification (ECL-09) — au-dessus du design system,
 * jamais contre lui.
 *
 * Aucune couleur littérale : tout passe par les jetons de dashboard.css. Le
 * jaune de la marque reste au [AI] du logo. Aucun `!important` : une utilitaire qui
 * gagne par la force casse le composant qu'elle habille (scripts/check-css.js).
 */

.proofs-body { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Les listes de modules et de preuves ---------- */

.proofs-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.proofs-module {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.proofs-module-head { display: flex; }

.proofs-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.proofs-detail h5 { margin: 0; font-size: 0.95rem; }

/* Le texte d'une preuve vient d'un apprenant : il garde ses retours a la
   ligne et ne deborde jamais de sa carte. */
.proofs-body,
.proofs-review p { overflow-wrap: anywhere; }

.proofs-review {
  border-left: 3px solid var(--warning);
  padding-left: var(--space-3);
}

/* ---------- Les formulaires ---------- */

.proofs-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.proofs-group { display: flex; flex-direction: column; gap: var(--space-1); }

/* ECL-43 — une panne vue en prod : les TROIS formes du dépôt s'affichaient en
   même temps. `hidden` est un attribut, et sa règle d'agent utilisateur
   (`display: none`) perd contre une classe : le texte, le lien ET le fichier
   étaient visibles ensemble, et personne ne savait lequel remplir. */
.proofs-group[hidden] { display: none; }

.proofs-label { font-size: 0.8rem; color: var(--text-muted); }

.proofs-kinds {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  border: 0;
  margin: 0;
  padding: 0;
}

.proofs-kind { display: inline-flex; align-items: center; gap: var(--space-1); }

.proofs-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.proofs-time {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px dashed var(--border);
  padding-top: var(--space-3);
}

.proofs-time h5 { margin: 0; }

/* ---------- Le compteur et la certification ---------- */

.proofs-gains-total { font-size: 1.4rem; font-weight: 600; margin: 0; }

.proofs-cert-line { margin-top: var(--space-4); }

.proofs-conditions {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.proofs-condition,
.proofs-team-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (max-width: 720px) {
  .proofs-form { padding: var(--space-2); }
  .proofs-kinds { flex-direction: column; gap: var(--space-2); }
}

/* --- ECL-43 : l'exemple de preuve, avant la boîte vide -------------------- */

.proofs-example {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.proofs-example p { margin: 0; }
.proofs-example-title { font-weight: 600; }
.proofs-example-text { line-height: 1.55; }