.outils-liste-page { padding: 48px 0 96px; }

.outils-liste-entete h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.outils-liste-entete h1::after { content: ""; display: block; width: 48px; height: 3px;
  background: var(--gold); margin-top: 14px; }
.outils-liste-sous-titre { color: var(--muted); margin-top: 10px; }

.outils-liste-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-top: 36px;
}

.outil-carte {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; text-decoration: none; color: var(--text);
  transition: border-color var(--transition), transform var(--transition);
}
.outil-carte:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.outil-carte h2 { font-size: 1.3rem; font-weight: 800; margin-top: 6px; }
.outil-carte p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.outil-carte-badge {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.outil-carte-badge.premium { background: rgba(232, 197, 71, 0.15); color: var(--gold); }
.outil-carte-badge.gratuit { background: rgba(80, 200, 120, 0.15); color: #6fd694; }

.outil-carte-lien { color: var(--gold); font-weight: 700; font-size: 0.9rem; margin-top: auto; }