/* ============================================================================
 * hub.css — Grille et cartes communes aux pages « hub » de l'espace Outils
 *
 * Extrait des blocs <style> dupliqués dans tools-games.html / tools-photo.html
 * (les deux copies étaient identiques et divergeaient à chaque retouche).
 * Une page hub charge ce fichier, puis, si elle a un univers propre, sa propre
 * feuille par-dessus (ex. CSS/hub-arcade.css pour les Jeux).
 *
 * Couleurs : UNIQUEMENT via --accent-text (jeton thème-conscient), jamais en
 * littéral par thème. C'est ce qui permet à un hub dont les surfaces ne suivent
 * pas le thème de la page — les bornes toujours sombres des Jeux, les tirages
 * toujours blancs de Photo — de redonner au jeton la bonne valeur, au lieu de
 * devoir repeindre chaque classe.
 * ========================================================================== */

.tools-section { padding-top: 7rem; padding-bottom: 7rem; min-height: 70vh; }
.tools-section .section-title { margin-bottom: 1rem; }

.tools-intro { text-align: center; max-width: 760px; margin: 0 auto 3rem; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  grid-auto-rows: 1fr;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* Mobile : une colonne pleine largeur (sinon la carte est plafonnée à 320px
   et paraît trop étroite). */
@media (max-width: 620px) { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  padding: 2rem; border-radius: 20px;
  background: var(--background-color);
  border: 1px solid rgba(55, 239, 186, 0.18);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  text-decoration: none; color: var(--text-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dark-mode .tool-card { background: #2a2e36; }
.tool-card:hover { transform: translateY(-6px); }

.tool-card-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; font-size: 1.7rem; color: var(--accent-text);
  background: linear-gradient(135deg, rgba(55, 239, 186, 0.2), rgba(0, 212, 255, 0.1));
}

/* Pastille de genre — vert vif dans les deux thèmes, donc encre SOMBRE. */
.tool-card-badge {
  position: absolute; top: 1.2rem; right: 1.2rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.7rem; border-radius: 20px; color: #25282f;
  background: linear-gradient(135deg, #37EFBA, #00d4aa);
}

.tool-card h3 { font-size: 1.3rem; margin: 0; }
.tool-card p { margin: 0; opacity: 0.85; line-height: 1.6; flex-grow: 1; }

.tool-card-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--accent-text); margin-top: 0.5rem;
}
.tool-card-cta i { transition: transform 0.3s ease; }
.tool-card:hover .tool-card-cta i { transform: translateX(4px); }

.tools-crosslink { text-align: center; margin: 3rem auto 0; max-width: 720px; font-size: 0.95rem; opacity: 0.9; }
.tools-crosslink a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.tools-crosslink a:hover { text-decoration: underline; }