/* ==========================================================================
 * Les exercices n8n (ECL-63).
 *
 * La page est une CONSIGNE, pas un tableau de bord : une liste de trois
 * cartes, puis des pas numérotés dont chacun porte son URL à copier et son
 * « pourquoi ». Aucune couleur nouvelle, aucun `!important`, aucune police —
 * les jetons du design system suffisent, et la consigne en tête est le
 * composant partagé (`.brief`, `public/css/practice.css`).
 * ========================================================================== */

.ex-head { margin-bottom: var(--space-5); }
.ex-title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.5rem; }

.ex-list { display: grid; gap: var(--space-4); }

.ex-card { display: grid; gap: var(--space-3); }
.ex-card .card-title { margin: 0; }
.ex-problem { margin: 0; line-height: 1.55; }
.ex-tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ex-meta { margin: 0; }
.ex-sep { color: var(--border); }
.ex-card .btn { justify-self: start; }

/* --- Un exercice, pas à pas ---------------------------------------------- */

.ex-doors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ex-steps {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.ex-step { display: grid; gap: var(--space-2); }

.ex-step-head { display: flex; gap: var(--space-3); align-items: baseline; }

/* Le numéro est un NŒUD, pas une puce : c'est un ordre à suivre. */
.ex-step-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--text-invert);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ex-step-do { font-weight: 600; line-height: 1.45; }
.ex-step-node { margin: 0; font-size: 0.85rem; color: var(--primary); font-weight: 600; }
.ex-step-field { margin: 0; line-height: 1.5; }
.ex-step-why { margin: 0; color: var(--text-muted); line-height: 1.5; }
.ex-step-label { font-weight: 600; color: var(--text); }

/* --- Ce qui se copie ------------------------------------------------------ */

.ex-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: var(--space-2) var(--space-3);
}

.ex-url {
  flex: 1 1 240px;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.ex-body {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font-size: 0.82rem;
  overflow-x: auto;
}

.ex-check, .ex-gain { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.ex-check .card-title, .ex-gain .card-title { margin: 0; }
.ex-check p, .ex-gain p { margin: 0; line-height: 1.55; }