/**
 * Vocabulaire visuel « application » : grille de cartes d'action et vues plein écran.
 *
 * Extrait des classes .app-* réécrites à l'identique dans my-list.html (lignes 53-330)
 * et my-space.html, renommées en `as-*` pour cohabiter avec elles pendant la migration.
 */

.as-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--as-gap-sm);
}

/* Sur un écran de téléphone, il manquait une vingtaine de pixels pour tenir deux cartes
   de front : elles s'empilaient, au prix de cent trente pixels de hauteur et d'un
   défilement inutile sur l'accueil. */
@media (max-width: 430px) {
  .as-grid {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }

  .as-card { padding: 12px 10px; }
  .as-card-icon { font-size: 1.9rem; margin-bottom: 6px; }
  .as-card-title { font-size: 0.9rem; }
  .as-card-subtitle { font-size: 0.75rem; line-height: 1.35; }
}

.as-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--as-radius);
  padding: var(--as-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  border: none;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--as-shadow);
  text-decoration: none;
  color: inherit;
}

.as-card:active { transform: scale(0.97); }
.as-card-icon { font-size: 2.3rem; margin-bottom: var(--as-gap-sm); line-height: 1; }
.as-card-title { font-size: 0.95rem; font-weight: 700; color: var(--as-text); margin: 0; line-height: 1.3; }
.as-card-subtitle { font-size: 0.8rem; color: var(--as-text-muted); margin: 4px 0 0; }

.as-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 11px;
  background: var(--as-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.as-card.as-danger { border: 2px solid #e74c3c; }
.as-card.as-danger .as-card-title { color: #e74c3c; }

.as-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--as-radius);
  padding: 18px 16px;
  box-shadow: var(--as-shadow);
  margin-bottom: var(--as-gap-sm);
}

.as-section-title { font-size: 1.05rem; font-weight: 700; color: var(--as-text); margin: 0 0 var(--as-gap-sm); }

.as-empty {
  text-align: center;
  padding: var(--as-gap-lg) var(--as-gap);
  color: var(--as-text-muted);
}

.as-empty-icon { font-size: 3rem; margin-bottom: var(--as-gap-sm); }