/* Modale cliparts — s'appuie sur .modal/.modal-content globaux */
.clipart-modal .modal-content{
  width: min(1100px, 96vw);
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
}

/* Toolbar */
.clipart-toolbar{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}
#clipartSearch{
  flex:1 1 auto;
  background:#0c1018; color:#fff; border:1px solid #263049;
  border-radius:8px; padding:10px; font-size:16px;
}
.toolbar-right{ display:flex; gap:8px; }

/* Grille */
.clipart-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
  overflow:auto;
  padding:2px;
  border:1px solid #263049;
  border-radius:8px;
  background:#0c1018;
}

/* Carte catégorie (galerie) */
.clipart-cat-card{
  display:flex; flex-direction:column; gap:8px; align-items:stretch;
  border:1px solid #2a3550; border-radius:12px;
  background:#121a2a; cursor:pointer; padding:8px;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
}
.clipart-cat-card:hover{ transform: translateY(-1px); border-color:#3b82f6; box-shadow: 0 6px 18px rgba(0,0,0,.28); }

.cat-cover{
  position:relative; overflow:hidden; border-radius:8px;
  background:
    linear-gradient(45deg,#222 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#222 75%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 25%,#222 25%) 8px 8px/16px 16px,
    linear-gradient(45deg,#222 75%,transparent 75%) 8px 8px/16px 16px; /* damier transparence */
  aspect-ratio: 16 / 9;
}
.cat-cover img{
  width:100%; height:100%; object-fit:contain; display:block;
}

.cat-title{
  width:100%; text-align:center; font-size:14px; color:#e7ecf7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Carte item */
.clipart-card{
  display:flex; flex-direction:column; gap:6px; align-items:center;
  border:1px solid #2a3550; border-radius:10px;
  background:#121a2a; cursor:pointer; padding:10px;
  transition: transform .08s ease, border-color .08s ease;
}
.clipart-card:hover{ transform: translateY(-1px); border-color:#3b82f6; }
.clipart-card img{
  max-width:100%; height:140px; object-fit:contain; background:
    linear-gradient(45deg,#222 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#222 75%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 25%,#222 25%) 8px 8px/16px 16px,
    linear-gradient(45deg,#222 75%,transparent 75%) 8px 8px/16px 16px;
  border-radius:6px;
}
.clipart-name{
  width:100%; text-align:center; font-size:12px; color:#c9d4ea; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* État vide */
.clipart-empty{
  padding:16px; color:#c9d4ea; opacity:.8;
}

/* Footer */
.clipart-footer{
  display:flex; justify-content:space-between; align-items:center; color:#9aa6c7;
}