/* 06-cards.css — lignes 317-367 de l'ancien style.css unique, contenu inchangé */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:var(--space-6);

margin-top:var(--space-8);

}

.card{

background:var(--surface);

padding:var(--space-6);

border-radius:var(--radius-lg);

box-shadow:var(--shadow);

transition:.3s;

}

.card:hover{

transform:translateY(-6px);

}

.card h3{

font-size:15px;

color:var(--text-light);

margin-bottom:var(--space-3);

}

.card h2{

font-size:32px;

margin-bottom:var(--space-3);

color:var(--primary);

}

/* ---------------------------------------------------------------------
   UN ÉTAT DE LISTE N'EST PAS UN ÉLÉMENT DE LA LISTE — V3, Cycle 136.

   `.cards` range ses enfants en colonnes de fiches. Un message qui parle
   DE la liste — « aucun client », « impossible de charger » — y était
   rangé comme s'il était l'un d'eux : la phrase se repliait sur 230 px,
   et l'état d'échec, qui compte deux moitiés, occupait deux cellules avec
   son bouton étiré à 541 px de large.

   Ces états traversent la grille au lieu d'y entrer.
   --------------------------------------------------------------------- */
.cards > .empty-hint{
    grid-column:1 / -1;
}

.etat-liste{
    grid-column:1 / -1;
}

/* Le bouton retrouve sa taille naturelle sans qu'on la lui impose :
   `.secondary-button` est déjà `inline-flex`. Ses 541 px ne venaient pas
   de son style mais du fait d'être une cellule de grille — une largeur
   imposée du dehors. Hors de la grille, il n'y a rien à corriger, et donc
   aucune valeur en dur à maintenir. */
.etat-liste .empty-hint{
    margin-bottom:var(--space-3);
}