/* landing/outils.css : sommaire des outils offerts
 *
 * La page reprend la barre de navigation, l'en-tête de page et le pied du
 * site (home.css, gabarit de mandat.html). Ce fichier ne porte que les
 * cartes des outils, préfixe `out-`, jetons de design-tokens.css.
 */

.out-cards { display: flex; flex-direction: column; gap: 14px; }
.out-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--rad);
  padding: 18px 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(123, 91, 240, .06);
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms, box-shadow 150ms;
}
.out-card:hover { border-color: var(--vl); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(123, 91, 240, .14); }
.out-card-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--v-soft); color: var(--v); display: flex; align-items: center; justify-content: center; }
.out-card-icon svg { width: 24px; height: 24px; }
.out-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.out-card-title { font-family: var(--fd); font-size: 1.05rem; font-weight: 700; color: var(--g); }
.out-card-text { font-size: .88rem; color: var(--g2); line-height: 1.55; }
.out-card-go { flex-shrink: 0; font-size: .85rem; font-weight: 700; color: var(--v); }
.out-card:hover .out-card-go { text-decoration: underline; }
.out-note { font-size: .86rem; color: var(--g2); line-height: 1.6; margin: 22px 0 0; }
.out-note a { color: var(--v); font-weight: 600; text-decoration: underline; }

@media (max-width: 560px) {
  .out-card { flex-wrap: wrap; }
  .out-card-go { width: 100%; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .out-card { transition: none; }
}