/* shared/exercise-item.css

   Un exercice dans une liste.

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ». */

/* =========================================================
   Exercice dans une liste
   ========================================================= */

.ex-list { border-top: 1px solid var(--border); }

.ex-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
}

.ex-item-title { margin: 0; font-size: var(--fs-5); font-weight: 600; line-height: 1.35; }

.ex-item-facts { margin: var(--s-1) 0 0; font-size: var(--fs-2); color: var(--muted); }

.ex-item-desc { margin: var(--s-2) 0 0; font-size: var(--fs-4); line-height: 1.55; max-width: 60ch; }

.ex-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); }

.ex-item-note { font-size: var(--fs-2); color: var(--muted); }

@media (max-width: 560px) {
  .ex-item { grid-template-columns: minmax(0, 1fr); }
  .ex-item-actions { justify-content: flex-start; flex-wrap: wrap; }
  .ex-item-actions .btn { flex: 1 1 100%; }
}