/* student/subscription.css

   Ma formule, les professeurs, et les encarts « formule requise ».

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

.sub-current { margin-bottom: var(--s-6); }
.sub-warn { color: var(--red); }

/* ---------- les quatre formules ---------- */

.sub-grid {
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
}

.sub-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.sub-card.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.sub-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.sub-card-name { margin: 0; font-size: var(--fs-5); font-weight: 650; }
.sub-card-price { margin: 0; font-size: var(--fs-6); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.sub-card-list { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sub-card-list li { position: relative; padding-left: 22px; font-size: var(--fs-3); color: var(--muted); line-height: 1.45; }
.sub-card-list li::before {
  content: '';
  position: absolute; left: 2px; top: 4px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.sub-card-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.sub-card-actions .btn { text-align: center; text-decoration: none; }

.sub-more { margin-top: 0; }

/* ---------- encart à la place d'un contenu réservé ---------- */

.sub-locked { border-style: dashed; }
.sub-locked .lesson-text { margin: 0; color: var(--muted); }

/* ---------- compteur de tests gratuits ---------- */

.quota-line {
  max-width: var(--w-lesson);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--primary-tint);
  border-radius: var(--r-md);
  font-size: var(--fs-3);
}
.quota-line .btn-text { font-weight: 600; }

/* ---------- les professeurs ---------- */

.teacher-list {
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}

.teacher-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.teacher-card-head { display: flex; align-items: center; gap: var(--s-3); }
.teacher-card-name { margin: 0; font-size: var(--fs-5); font-weight: 650; }
.teacher-card-bio { margin: 0; font-size: var(--fs-3); line-height: 1.55; color: var(--text); white-space: pre-line; }
.teacher-card-actions { display: flex; gap: var(--s-2); margin-top: auto; }
.teacher-card-actions .btn { flex: 1; text-align: center; text-decoration: none; }

/* ---------- enseignant : profil public ---------- */

.tp-form { max-width: var(--w-read); }