/* Accueil, tablettes et téléphones : grille de vignettes (image, titre, phrase d'accroche) à la place de l'ancien diaporama.
   3 colonnes (tablette), 2 (petite tablette et téléphone). Retour arrière : voir docs/nouveau-design-2026-11.md */
.grille-logiciels {
  /* clear : la page d'accueil a des blocs flottants juste au-dessus, une grille se placerait à côté et serait écrasée */
  clear: both;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 10px 0 30px;
}
.grille-logiciels .gl-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 16px 20px;
  background: #fff;
  border: 1px solid #e3e9f1;
  border-top: 4px solid var(--c, #4478b4);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(45, 71, 112, .09);
  color: #2d4770;
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.grille-logiciels .gl-carte:hover { box-shadow: 0 12px 28px rgba(45, 71, 112, .18); transform: translateY(-2px); }
.grille-logiciels .gl-image { display: flex; align-items: center; justify-content: center; height: 170px; width: 100%; margin-bottom: 12px; }
.grille-logiciels .gl-image img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.grille-logiciels .gl-titre { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.grille-logiciels .gl-accroche { font-size: 13px; line-height: 1.5; color: #5d7396; }

@media (max-width: 767px) {
  .grille-logiciels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
/* téléphone : toujours 2 vignettes côte à côte (jamais une seule par ligne), vignettes plus compactes */
@media (max-width: 575px) {
  .grille-logiciels { gap: 10px; }
  .grille-logiciels .gl-carte { padding: 12px 8px 14px; border-radius: 14px; }
  .grille-logiciels .gl-image { height: 120px; margin-bottom: 8px; }
  .grille-logiciels .gl-titre { font-size: 13.5px; }
  .grille-logiciels .gl-accroche { font-size: 11.5px; line-height: 1.4; }
}

/* groupes : professionnels (bleu) et famille (violet), mêmes couleurs que la version ordinateur */
.grille-logiciels.gl-pro, .gl-titre-groupe.gl-pro { --c: #4478b4; }
.grille-logiciels.gl-famille, .gl-titre-groupe.gl-famille { --c: #70217c; }
.gl-titre-groupe { clear: both; margin: 26px 0 12px; padding: 12px 18px; border-radius: 12px; background: var(--c); font-size: 17px; font-weight: 700; }
.gl-titre-groupe a { color: #fff !important; text-decoration: none; }
.grille-logiciels { padding-top: 4px; }