/* ============================================================
   TECO V2 — Page Tarifs (audit conso #11, juin 2026)
   Grille consolidée : formations, Esprit Pro, réductions, modalités.
   Réutilise framework-v2 (variables, glass-card-1, boutons, sections).
   ============================================================ */

/* ---- Grille de cards tarifs ---- */
.trf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 900px) {
  .trf-grid { grid-template-columns: 1fr 1fr; }
  .trf-card--full { grid-column: 1 / -1; }
}

.trf-card { padding: 30px 28px; }

.trf-card__title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}
.trf-card__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

/* ---- Lignes formation / prix ---- */
.trf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.trf-row:last-child { border-bottom: none; padding-bottom: 0; }
.trf-row__name {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.trf-row__price {
  text-align: right;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  white-space: nowrap;
  flex: none;
}
.trf-row__price .prix-fcfa { margin-top: 0; }

/* ---- Liste réductions / modalités ---- */
.trf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trf-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.trf-list li svg {
  flex: none;
  margin-top: 4px;
  color: var(--color-rouge-teco);
}
.trf-list strong { color: var(--color-text-primary); }

.trf-footnote {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 16px;
  line-height: 1.5;
}
/* Lien de contenu noye dans la note (ex. "conditions generales de vente") : rouge + souligne */
.trf-footnote a {
  color: var(--color-text-primary);
  font-style: italic;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-rouge-teco);
}
.trf-footnote a:hover { text-decoration: none; }

/* ---- Bandeau CTA final ---- */
.trf-cta {
  text-align: center;
  margin-top: 8px;
}
.trf-cta .trf-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

/* ============================================================
   TRES PETITS ECRANS (<= 480 px) : la page ne doit JAMAIS etre
   plus large que l'ecran, sinon tout element position:fixed
   (menu mobile en feuille basse, bandeau RGPD) sort a droite.
   Constat du 25/07 : a 320 px la page faisait 347 px.
   Cause : .trf-row est une ligne flex (libelle + prix) qui ne se
   replie pas. Son minimum est donc la SOMME des deux, soit 274 px
   la ou la carte n'en offrait que 232, et une piste en 1fr ne peut
   pas descendre sous le minimum de son contenu.
   ============================================================ */
@media (max-width: 480px) {
  .trf-grid { grid-template-columns: minmax(0, 1fr); }
  .trf-card { padding: 1.35rem 1.15rem; }
  /* le prix passe sous son libelle plutot que de forcer la largeur */
  .trf-row { flex-wrap: wrap; }
}